Changing padding on a column depending on screen size

[chris_w]

I have named the column ‘office-details’ in the ID section and I am interested in adding 20px of padding to the right of the column when it is in full/max screen view and for the padding to go when in mobile view as it should then take the full width of the screen.

What would the code be for selecting which breakpoints this should happen on and not and can it be added to the ‘style’ or ‘class’ of the column?

Fro example selecting for padding to happen on 2 of the 5 breakpoints?

[friech]

Hi @chris_w,

Thank you for writing in, please apply the 20px padding-right to your column like you normally would.

Then add this to the Page > CSS to get rid of that padding-right on 767px screens and below (mobile view).

@media (max-width: 767px) {
	#office-details {
		padding-right: 0 !important;
	}
}

If that did not work, please provide us a direct URL where we can see the said column.

Hope it helps,
Cheers!

[chris_w]

Legend, that works perfectly.

[lely]

You’re always welcome @chris_w!

This guide will help you better.

Cheers!