CSS – Margin depending on screen size

• 

  matchalatteparis · Member · Sep 20, 2016 at 3:34 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  Hope you’re well.
  Some of the page on my site (for instance https://matchalatte-paris.com/conseil-marketing/ ) are basic pages with text and images, using the wordpress Gateway template.

  When I use the full page template, the text takes the whole width of the page, which is a little bit unfortunate on large screens and I would like to customize the template and add margins on the left and right to create proper text blocks.

  However, for responsiveness purposes, I would like the margins to apply only to desktop and tablets but not on mobile.

  Does anybody know how i can create margin that apply only to a certain screen size ?

  Thank you very much in advance,

  Bests,

  Gregoire

  The blog I need help with is matchalatte-paris.com.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 27, 2016 at 2:54 am

  • Copy link

  Hi Gregoire, originally maximum width for full-width page template content areas was 75em. You can add the following to your custom CSS and adjust that as desired. I’ve used a 50em value in the following. I’ve specifically targeted full width pages.

  .page-template-template-full .site-content {
      max-width: 50em;
  }

• 

  matchalatteparis · Member · Oct 3, 2016 at 4:40 pm

  • Copy link

  Hi “thesacredpath”,

  It works perfectly, thanks !

• 

  thesacredpath · Member · Oct 3, 2016 at 9:21 pm

  • Copy link

  Hooray and you are welcome!