Title: Desktop/Mobile- different margin
Last modified: August 22, 2016

---

# Desktop/Mobile- different margin

 *  [dramapp](https://wordpress.org/support/users/dramapp/)
 * (@dramapp)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/)
 * Dear friends, I would like to have a different top margin for my desktop version
   and for a mobile version – how can I do it using CSS editor?
 * regards!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833704)
 * Hey there dramapp,
 * How are you doing today?
 * You can achieve that by using media queries. You can find more info in one of
   the following links:
 * [http://www.w3schools.com/cssref/css3_pr_mediaquery.asp](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
   
   [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
 * Generally you should set the margin for your desktop resolutions something like
   this:
 *     ```
       .yourclass {
       margin-top: 100px;
       }
       ```
   
 * And then add the margin for mobile version, something like this:
 *     ```
       @media screen and (max-width: 600px) {
       .yourclass {
       margin-top: 50px;
       }
       }
       ```
   
 * By doing this you should have top margin 50px on resolutions 600px and less and
   100px for resolutions above 600px.
 * If this doesn’t work could you please post link to your site and explain which
   margin you’re trying to change so I can take a look?
 * Hope this makes sense 🙂
 * Best regards,
    Bojan
 *  Thread Starter [dramapp](https://wordpress.org/support/users/dramapp/)
 * (@dramapp)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833725)
 * Hey Bojan, thank you very much for your tips, I will check those out, the site
   is [http://dramapp.com](http://dramapp.com) and what I am trying to achieve is
   to make a smaller top margin on a mobile screens.
 * Best!
 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833907)
 * Hey again dramapp,
 * In this case you should only modify top margin on smaller resolutions. You can
   do that by adding the following CSS code in the style.css file of your [child theme](http://codex.wordpress.org/Child_Themes)
   or if your theme doesn’t have custom CSS tab add it in your site using the following
   plugin:
 * [http://wordpress.org/plugins/simple-custom-css](http://wordpress.org/plugins/simple-custom-css)
 *     ```
       @media screen and (max-width: 768px) {
       header#masthead {
       margin-top: -70px;
       }
       }
       ```
   
 * This should leave your desktop margin as it is and only reduce it for the resolutions
   smaller then 768px.
 * Please let me know if this helps 🙂
 * Best regards,
    Bojan
 *  Thread Starter [dramapp](https://wordpress.org/support/users/dramapp/)
 * (@dramapp)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833912)
 * Hey Bojan,
 * thanks a lot! It worked 🙂
 * have a nice day!
 *  [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * (@wpmudev-support4)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833922)
 * Glad I could help! Have a great one as well 🙂
 * Cheers,
    Bojan

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Desktop/Mobile- different margin’ is closed to new replies.

## Tags

 * [margin](https://wordpress.org/support/topic-tag/margin/)

 * 5 replies
 * 2 participants
 * Last reply from: [Bojan Radonic – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support4/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/desktopmobile-different-margin/#post-5833922)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics