Docs

[arctwelve]

Hello,

I’m trying to change the padding within a row based on screen size. I’m having trouble figuring out how to reference the specific row within the Custom CSS section so that I can change the padding based on a media query. Can you please point me in the right direction?

Regards,
Trevor

[Joao]

Hi Trevor

Please provide your URL and point which section you are referring to.

By the way I reccomend you setting your paddling in % instead of px on desktop that way it respnds much better on mobile and tablets, let us know if that works for you.

Cheers

[arctwelve]

This reply has been marked as private.

[Lely]

Hello Trevor,

Thank you for the complete information. We can always add ID(should be unique- characterize by #) or Class(can be use multiple times – characterized by dot(.) ) on ROW to target spacing. I can see that you have added the class ourprocess_row already. To use that in CSS, please try this:

@media (max-width: 979px){ /*when screen size is 979px or less*/
.ourprocess_row{
  padding: 0 10% !important; /*0 is top and bottom padding while 10% is right and left padding*/
}
}
@media (max-width: 480px){ /*when screensize is 480px or less*/
.ourprocess_row{
  padding: 0 5% !important;
}
}

Hope this helps.

[arctwelve]

Thanks for your assistance. The CSS is still not working. I added the following (outside of a media query):

.ourprocess_row {
padding: 0% 0% important!;
}

It is still not overriding the padding set on the Cornerstone page.

Thanks.

[Nabeel A]

Hi there,

Thanks for writing in! Your CSS is incorrect, please replace it with this:

.ourprocess_row {
    padding: 0% 0% !important;
}

Let us know how this goes!

[arctwelve]

Oops. I guess it would help if I could read. It is now working. Thanks so much for your help!

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts