Changing body width on desktop vs mobile

[patrickg]

I’m looking for CSS (or other methods) code to adjust the width of my body copy when displayed on different screen widths. Ideally I’d have the body width at 60% for tablet and larger. Smaller would go to 80%.

If you visit the page below it’s set at 80% for all device sizes.

Jim Rutledge Teams with Nike Designer to Launch 13 Year Old Bourbon

Below is the code I was given a while back to set my body width for reference:

.single-post .entry-wrap, .single-post .x-comments-area {
width: 80%;
margin: 0 auto;

}

Appreciate the help,

Patrick

[ruenel]

Hello Patrick,

Thanks for reaching out to us. What you have in mind requires custom CSS code which is beyond the scope of our support already. We can only point you to get your customizations started. In your case, you will have to use the @media CSS to target the screen width for your custom CSS. For example,

@media (min-width: 980px) {
  .element-class {
     width: 60%;
  }
}

@media (max-width: 979px) {
  .element-class {
     width: 80%;
  }
}

This code block will set the width of the element class to 60% if the screen is greater than 980 pixels and will change the width to 80% when the screen width is less than 980 pixels.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Hope this helps.