Simplest way is to use dimensions in % or em. Just change the base font size everything will change.

**Less**

	@media (max-width: @screen-xs) {
	    body{font-size: 10px;}
	}

	@media (max-width: @screen-sm) {
	    body{font-size: 14px;}
	}


	h5{
		font-size: 1.4rem;
	}       
Look at all the ways at  https://stackoverflow.com/a/21981859/406659

You could use viewport units (vh,vw...) but they **dont work on Android &lt; 4.4** 

Well, my solution is sort of hack, but it works and I am using it.

    1vw = 1% of viewport width
    
    1vh = 1% of viewport height
    
    1vmin = 1vw or 1vh, whichever is smaller
    
    1vmax = 1vw or 1vh, whichever is larger
    
    h1 {
      font-size: 5.9vw;
    }
    h2 {
      font-size: 3.0vh;
    }
    p {
      font-size: 2vmin;
    }

I am a newbie to the Automapper framework. I have a domain class and a DTO class as follows:

    public class Employee
    {
       public long Id {get;set;}
       public string Name {get;set;}
       public string Phone {get;set;}
       public string Fax {get;set;}
       public DateTime DateOfBirth {get;set;}
    }
    
    public class EmployeeDto
    {
       public long Id {get;set;}
       public string FullName {get;set;}
       public DateTime DateOfBirth {get;set;}
    }

Note: The name of property &quot;**Name**&quot; of `Employee` class is not the same as that of property &quot;**FullName**&quot; of `EmployeeDto` class.

And here&#39;s the code to map the `Employee` object to `EmployeeDto`:

    Mapper.CreateMap&lt;Employee, EmployeeDto&gt;(); // code line (***)
    EmployeeDto dto = Mapper.Map&lt;Employee, EmployeeDto&gt;(employee); 

My question is: If I want to map `Employee` (source class) to `EmployeeDto` (destination class), how can I specify the mapping rule? In other words, how should I do more with code line (\***) above?

How to specify mapping rule when names of properties differ

I am trying to post multiple parameters on a WebAPI controller. One param is from the URL, and the other from the body. Here is the url:
 `/offers/40D5E19D-0CD5-4FBD-92F8-43FDBB475333/prices/`

Here is my controller code:

    public HttpResponseMessage Put(Guid offerId, OfferPriceParameters offerPriceParameters)
    {
        //What!?
        var ser = new DataContractJsonSerializer(typeof(OfferPriceParameters));
        HttpContext.Current.Request.InputStream.Position = 0;
        var what = ser.ReadObject(HttpContext.Current.Request.InputStream);
    
        return new HttpResponseMessage(HttpStatusCode.Created);
    }



The content of the body is in JSON:

    {
    	&quot;Associations&quot;:
        {
        	&quot;list&quot;: [
            {
            	&quot;FromEntityId&quot;:&quot;276774bb-9bd9-4bbd-a7e7-6ed3d69f196f&quot;,
                &quot;ToEntityId&quot;:&quot;ed0d2616-f707-446b-9e40-b77b94fb7d2b&quot;,
                &quot;Types&quot;:
                {
                	&quot;list&quot;:[
                    {
                    	&quot;BillingCommitment&quot;:5,
                        &quot;BillingCycle&quot;:5,
                        &quot;Prices&quot;:
                        {
                        	&quot;list&quot;:[
                            {
                            	&quot;CurrencyId&quot;:&quot;274d24c9-7d0b-40ea-a936-e800d74ead53&quot;,
                                &quot;RecurringFee&quot;:4,
                                &quot;SetupFee&quot;:5
                            }]
                        }
                 	}]
             	}
          	}]
     	}
    }


Any idea why the default binding is not able to bind to the `offerPriceParameters` argument of my controller? It is always set to null. But I am able to recover the data from the body using the `DataContractJsonSerializer`.

I also try to use the `FromBody` attribute of the argument but it does not work either.


WebAPI Multiple Put/Post parameters

I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;

But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?

Bootstrap Responsive Text Size

<p>I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;</p>
<p>But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?</p>


I have been trying to sort out how to center an oversized image within a div using css only.

We are using a fluid layout, so the width of the image containers varies as the page width does (height of div is fixed).  The image sits within a div, withvalue  an inset boxshadow so as to appear as if you are looking through the page at the image.

The image itself has been sized to fill the surrounding div at its widest possible value (the design has a `max-width` value).

It is pretty easy to do if the image is smaller than the surrounding div:

&lt;!-- language: lang-css --&gt;

	margin-left: auto;
	margin-right: auto;
	display: block;	

But when the image is larger than the div it simply starts at the left edge and is off center to the right (we are using `overflow: hidden`).

We could assign a `width=100%`, but browsers do a lousy job of resizing images and the web design centers around high quality imagery.

Any ideas on centering the image so that `overflow:hidden` cuts off both edges evenly?


Center Oversized Image in Div

I am working on a japanese website and have a hard time finding a font which looks good in japanese. I was surprised that so few fonts seem to exist for japanese. My team has contacted several web font providers without much success. Only one company could offer a web font for japanese but it was 35 megabytes which is far to big for the clients to download to their browsers.

For Latin letters there are a few fonts which one can be quite confident almost all users have, like Arial, Verdana, TNR, Georgia and so on. What fonts equal these in japan?

Japanese standard web fonts

I&#39;m trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved to a cookie for about a week. The next time you open your HTML file, it should be the previous file you&#39;ve chosen.


JavaScript code:

    function cssLayout() {
        document.getElementById(&quot;css&quot;).href = this.value;
    }


    function setCookie(){
        var date = new Date(&quot;Februari 10, 2013&quot;);
        var dateString = date.toGMTString();
        var cookieString = &quot;Css=document.getElementById(&quot;css&quot;).href&quot; + dateString;
        document.cookie = cookieString;
    }

    function getCookie(){
        alert(document.cookie);
    }


HTML code:

    &lt;form&gt;
        Select your css layout:&lt;br&gt;
        &lt;select id=&quot;myList&quot;&gt;
            &lt;option value=&quot;style-1.css&quot;&gt;CSS1&lt;/option&gt;
            &lt;option value=&quot;style-2.css&quot;&gt;CSS2&lt;/option&gt;  
            &lt;option value=&quot;style-3.css&quot;&gt;CSS3&lt;/option&gt;
            &lt;option value=&quot;style-4.css&quot;&gt;CSS4&lt;/option&gt;
        &lt;/select&gt;
    &lt;/form&gt;

    


Set cookie and get cookie with JavaScript

I am using twitter bootstrap, and have a row which has two columns (span6). How do I create a vertical divider between both the spans. 

Thanks,
Murtaza 

vertical divider between two columns in bootstrap

I need something like this:
![][1]


  [1]: http://i.stack.imgur.com/ANsZ1.png

How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?

How to strike through obliquely with css

There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the [official Bootstrap site][1], but there was only a download section and a few words after that. Nothing that explains what is it for... I just understood that it is a front-end helper. I have tried to find something by Googling, but found nothing specific. Everything I found is related to the computer science definition. 

So, my questions are: 

 - What is Bootstrap at all?
 - What is it used for, and how does it help front-end development?
 - I would also like some more details explaining it.


  [1]: http://getbootstrap.com/

What is Bootstrap?

I created a tooltip using Twitter Bootstrap.

The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line.

How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips themselves?

How do you change the width and height of Twitter Bootstrap&#39;s tooltips?

I work in a project where we don&#39;t use JQuery.

Is twitter bootstrap dependant on it ?  



Can I use twitter bootstrap without jquery?

I&#39;m using Twitter Bootstrap and I notice that jQuery `show()` or `fadeIn()` doesn&#39;t make DOM element marked with class `hidden` appear because the jQuery functions only remove the `display: none` specification. However, the `visibility` is still set to `hidden`.

I wonder what is the best possible way to work around this?

1. Remove the `hidden` class on the element
2. Change the visibility property
3. Overwrite the hidden class in my own css

In particular, I want to know whether fixing this with jQuery or css is better and why.

jQuery show() for Twitter Bootstrap css class hidden

I&#39;ve created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers. 

Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don&#39;t need to include it? I&#39;m confused as to why it seems to be a best practice, as it&#39;s breaking my stuff.

Am I missing something?

Is the viewport meta tag really necessary?

In this example:

**THE CSS**

    h1 { font-size: 2em; }
    .smaller { font-size: 0.5em; }

**THE HTML**

    &lt;h1&gt;Hi, I am a &lt;span class=&quot;smaller&quot;&gt;toad&lt;/span&gt;&lt;/h1&gt;

Will the word &quot;toad&quot; be 0.5 times 16px (the browser&#39;s standard font-size) or will it be 0.5 times 2em (the font-size of the h1)?

What is the context of em?

I&#39;ve created a site using the **Zurb Foundation 3** grid. Each page has a large `h1`:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      font-size: 100%
    }

    /* Headers */

    h1 {
      font-size: 6.2em;
      font-weight: 500;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;twelve columns text-center&quot;&gt;
        &lt;h1&gt; LARGE HEADER TAGLINE &lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- End Tagline --&gt;
    &lt;/div&gt;
    &lt;!-- End Row --&gt;

&lt;!-- end snippet --&gt;

When I resize the browser to mobile size the large font doesn&#39;t adjust and causes the browser to include a horizontal scroll to accommodate for the large text.

I&#39;ve noticed that on the **Zurb Foundation 3** Typography [example page][1], the headers adapt to the browser as it is compressed and expanded. 

Am I missing something really obvious? How do I achieve this?


  [1]: http://foundation.zurb.com/sites/docs/v/3.2.5/typography.php

Responsive font size in CSS

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I&#39;d like to do something like:

    footer {
      width: 100%;
    }
    
    .tablet {
      footer {
        width: 768px;
      }
    }
    
    .desktop {
      footer {
        width: 940px;
      }
    }

At the end something like this should be the result:

    footer {
      width: 100%;
    }
    
    @media screen and (min-width: 768px) {
      footer {
        width: 768px;
      }
    }
    
    @media screen and (min-width: 992px) {
      footer {
        width: 940px;
      }
    }

.tablet could look somehow like this:

    @media screen and (min-width: 768px) {
      .tablet {
    
      }
    }

Hope somebody has a nice idea!



Fancy Media Queries with some LESS Magic

I have a YouTube video embedded on our website and when I shrink the screen to tablet or phone sizes it stops shrinking at around 560px in width. Is this standard for YouTube videos or is there something that I can add to the code to make it go smaller?

Content Type	Original Author	Original Content on Stackoverflow
Question	Somk	View Question on Stackoverflow
Solution 1 - Css	aWebDeveloper	View Answer on Stackoverflow
Solution 2 - Css	Murtaza Khursheed Hussain	View Answer on Stackoverflow

Bootstrap Responsive Text Size

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

WebAPI Multiple Put/Post parameters

How to specify mapping rule when names of properties differ

Attributions