Responsive padding/margins

[vlntnt]

Hi I have created the column with the text, and set padding in the column 8% on top and bottom so the text appears somewhat centered:

when I shrink the screen however, the text “An education…” goes up:

How can I make the text’s margins/padding remain proportionate even when the screen is being shrinked? Thanks.

[jade]

Hi @vlntnt,

Do you have the Marginless Columns option in the row setting enabled? If so, please remove the padding to the columns and add this to the Column’s Element CSS:

$el {
  vertical-align: middle !important;
}

Element CSS | Themeco Docs

Hope this helps.

[vlntnt]

@Jade

$el {
vertical-align: middle !important;
}

Thank you, Jade

[ruenel]

You’re welcome!
We’re glad @Jade were able to help you out.

[mujtaba677]

While this CSS below work for me for mobile padding but I am not able to individually select padding of my element.

@media (max-width:480px){
.x-main.full {
padding: 0 20px;
}
}

[christian]

Hey @mujtaba677,

Looking at the CSS you posted, it’s for .x-main.full and not a specific element. To target individual elements, please use the Element CSS. Please read the documentation at https://theme.co/apex/forum/t/features-element-css/20500

Thanks.

[mujtaba677]

Thank you, I have seen you response just today only, will try for element in media setting and will check if it works.

[ruenel]

You are most welcome!