Where to place Responsive directives

[WaveLynx]

Hello -

I would like to understand the various places that I can direct my pages to include responsive styling. I get that I can edit my child theme’s styles.css, and I can include CSS in Elements CSS, and also in the Theme’s Custom CSS area. I can also set the Hide-in-Mobile selections in the Customize areas. So many!

With respect to let’s say sizing an image to be smaller on a mobile device. Where would you do this? The last time I asked about these sorts of things they said I should create my own media breakpoints in an external CSS file. It sure seems like that is overkill if Pro has the ability already to Hide elements when the viewports are of certain sizes. It sure would be great to be able to set Element CSS for a given viewport— add in a scaling effect for mobile and tablet and be done with it. Needing to go out to an external file seems odd.

Thank you!

Rich

[friech]

Hi Rich,

Thank you for writing in, there is no need for creating an external CSS file, you can do CSS Media Query on the CSS areas you mentioned above.

But please keep in mind though, that the elements are responsive in nature unless you applied a custom CSS to it that break its responsive behavior (e.g. a fixed width, fixed margin or padding)

Hope it helps,
Cheers!