Two column responsive page
-
I am trying to add CSS to https://greeleyindivisible.org/resources/ that allows responsive column layout. I have simple inline styles to create columns on desktop (it’s not a theme option) but the columns do not stack on mobile. I am a beginner at CSS so any help is appreciated!
RonnaThe blog I need help with is: (visible only to logged in users)
-
I took a look at your site on mobile and from what I can see you set the width to 40% and used float: left for your National Elections and Publications/Media DIVs in your custom CSS.
The style will apply on both desktop and mobile devices. You should be using Media queries in your CSS to separate mobile from desktop styles.
Media queries use the screen or browser size to trigger their CSS so you can control when to display 1 or 2 columns. They start with @media, you then need to set a max-width in pixel so they stop applying to screens larger than what you want.
For example you could have something like that:
@media screen and (max-width: 768px) { .example width: 100%; padding: 0 10pt 0 0; float: none; }This will then display 1 column on screens smaller than 768px. There is a guide on Media Queries here:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
Hope this helps!
-
Hi @greeleyindivisible, to use the code that @ladysawen gave above, you would need to have the WordPress.com Premium Plan upgrade, which includes Custom Design and the ability to add custom CSS.
There isn’t a way to limit the HTML you have used to make the two columns without custom CSS.
-
-
- The topic ‘Two column responsive page’ is closed to new replies.