Max-width images on tablet & mobile – X theme and Pro

Sometimes you’re going to want to use different display settings for rows depending on screen size. Images, for example, tend to look better when full width on mobile and tablet, but when it’s on a bigger screen it can make things look very strange. But we want to have the best of both worlds, so let’s see how we can apply full width to rows in tablet and mobile while keeping the original settings for larger screens by creating a simple CSS class according to screen size.

First up open the page you would like to edit in Pro (Pro theme) or Cornerstone (X theme).

Click on the row you want to edit and go to the [customize] tab at the top.

In CSS class we’re going to add a new class max-width-mob-tab (you can call this any class you like, but make sure it matches the CSS class you add it to).

Next we need to create the custom class max-width-mob-tab so that the changes will take effect. For this we are going to edit the global CSS so that we can quickly apply these changes to different parts of the website later on.

Please note there are two different areas for adding CSS for X theme/PRO theme.

Global CSS in Customizer is the same as the CSS area in theme options. However this is a different CSS area to the [additional CSS] in [customizer].
You can use either, but make sure to be consistent or else you will start losing CSS all over the place.
As a general rule I try to restrict the “Global CSS” (in Theme Options / [Custom] > [Global CSS]) to truly global CSS things such as custom fontface additions. For instructions on how to add Fontface to X theme and Pro click here.

Additional CSS works better than Global CSS for website tweaking

I’ve also found that the “Global CSS” user experience area isn’t very good for daily tweaking which is why we’re going to use the [Additional CSS] area instead.
Navigate back to the WordPress Dashboard > [Appearance] > [Customizer].

Scroll down and click on [Additional CSS]. Here we are going to create a custom class for the rows we want to change and tell the browser the size of screen we want these changes to be affected on. In this case we’re go say that in all screen sizes below 1024px we want this row to display as max-width.

@media (max-width: 1024px){
.max-width-mob-tab {
width: 100% !important;
max-width: 100% !important;
}
}

That’s it!

Refresh the page and test on tablet and mobile and all images should be max width within the cell. To apply to all other rows simply add the max-width-mob-tab to the custom CSS of other rows you would also like to have full width on mobile and tablet.

Let us know how we can help. Simply post in the forum below.

Revisions & Troubleshooting – Possible problems

Full width on rows is breaking text spacing – no gaps on left and right

If you make the row full width and you don’t have any container spacing for text then chances are your text is going to run wall-to-wall. To fix this we’re going to add an extra class element to the 

 that’s holding the text. Following the same instructions above add to the [customize] section of the column. Then in Additional CSS we’re going to add:

.column-info {
	padding: 0% 5% 0% 5%;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *