Add padding to column ONLY on Deskptop Version

[jamie2364]

Hi

I want to add padding to a column down the bottom of my site jamieharrisonmusic.com so that it is not as wide, but I only want this to apply in the desktop version of the website, because when I do it in globally so that it applies in mobile also, it becomes far too small.

Is there a way I can add padding (or some other way) and ONLY apply it to the desktop version of my website?

Thanks
Jamie

[nabeel]

Hey Jamie,

Thanks for writing around! You can add the padding to any section for desktop only with CSS media queries. Are you referring to the Live section (see screenshot)

If yes then add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

@media screen and (min-width: 980px) {
	#live {
		padding: 20px 150px
	}
}

Feel free to adjust the padding in the above code. To learn more about CSS media queries, please see https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope this helps!

[jamie2364]

I was actually referring to the mailing list sections - I wanted to slightly decrease the width of the text fields. I did like what it did to live too though so I used that - Thank you!

COuld you tell me how I could do that with the mialing list section though? I tried substituting the ‘live’ tag with ‘mailing_list’ but it didnt work.
Any thoughts?

[nabeel]

Hi again,

For the Mailing List section you can make use of the following code:

@media screen and (min-width: 980px) {
	#mailing_list {
		padding: 20px 300px
	}
}

Feel free to adjust the padding in the above code. Let us know how this goes!

[jamie2364]

That didn’t work… Like I said, I had already tried it and it didn’t do anything.

I tried it again when you told me, but still nothing.

Any ideas?

[nabeel]

Hi again,

That’s strange, the above CSS works when I paste the code directly in Chrome’s developer tool (see screenshot)

There must be a syntax error in your Customizer that is preventing the code to work. Please review your CSS code and look out for any error like missing curly bracket.

In the meantime if you’ve child theme installed then try adding the above code in your Child Theme’s style.css file.

Let us know how this goes!

[jamie2364]

I checked and eveyrthing is exactly the same as you said. There is nothing missing or different about it. Also I’m not using a child theme, but I just posted a support ticket to get instruction on how to set that up.

Can you have a look for me and see everything is ok to find out why this isn’t working?

[nico]

Hi @jamie2364,

I believe you have missed a closing bracket on this part.

Please check also other CSS if your missed a closing bracket.

Hope it helps.

Let us know how it goes.

Thanks.

[jamie2364]

Waheyyyy! That did it! Very well spotted! I don’t know how that happened! I only just copy and paste things!

Thank you so much!

[paul.r]

You’re welcome!