Making columns or widgets responsive
-
I am wanting my front page to have a magazine (multi-column) look to it so I have been looking at Sela and Zuki themes, which both have several widget areas on the front page. These widget areas are responsive – i.e. they reduce in width as screen size is reduced, and then stack when screen size is small (e.g. smartphone). They do this by having relative widths (e.g. width:30%;)
However if I change the widths in CSS, the text widgets cease to be properly responsive – i.e. they don’t stack and so get impossibly thin on a smartphone screen. Even if I set the same widths in CSS, not altering anything else, they become unresponsive, which seems strange.
Likewise if I set up 3 x 30% columns on a wide text area, the columns are not properly responsive.
So clearly something more is required to make these modifications work. The percentage width works, but something else needs to be added to make the elements “stack”. Is anyone able to tell me the trick please?
The blog I need help with is: (visible only to logged in users)
-
The mobile ready theme is default and a completely different theme that you do not need to enable at all. These are the responsive layout themes https://theme.wordpress.com/themes/features/responsive-layout/
A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.
As I said above the mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme > Appearance > Mobile.
-
Hi timethief, I am using a responsive theme – Sela. I am familiar with the way some (and probably all) responsive themes work – percentage widths in the CSS reduce widths as screen size reduces, and media queries change a 3-column layout to 2-column or 1 column when screen size reduces to a small size.
But I can’t see why changing the percentage widths of widget areas slightly in my CSS somehow stops the media queries working (or so it seems) in the responsive theme.
I think I know enough CSS to do what I want, but I just don’t understand how things work in WordPress.
Thanks.
-
Okay then. Pleas hang in there until either Staff or a Volunteer who helps with CSS editing responds to you in this thread.
-
Hi everyone, I think I’ve managed to solve this myself thanks, and now have 3 responsive columns in my text area.
First I learnt how to download a full copy of the theme CSS that gave me the settings for the media queries. Then I added 3 asides in the text area and used the css to float them left. Then added the same media query settings for the 3 asides in the css, so they break from 3 columns to one at the same point as the rest of the theme does.
And it seems to work. Still a bit to work on to fully style it, but I’m on the way, and I thought I just tidy up this thread.
Thanks.
-
- The topic ‘Making columns or widgets responsive’ is closed to new replies.
WordPress.com Forums 