Responsive Columns

ifdc1974 · Member · Jul 10, 2014 at 9:14 pm
Copy link

Add topic to favorites
How do I create responsive columns?

This is what I have so far http://ifdcorg.wordpress.com/mali/ but when you look at it on mobile devices, the columns don’t wrap down.

Thanks.

Heather

The blog I need help with is: (visible only to logged in users)
genxergrandma · Member · Jul 10, 2014 at 10:07 pm
Copy link
Hello my dear,

Some themes are not “mobile friendly.” There is a way to find out.

From your dashboard try:

*Appearance
then look for and click
*Mobile
then check the box next to: “Enable mobile theme”

I use the Yoko theme, and the above works. Won’t hurt to give it a shot. :)
designsimply · Member · Jul 14, 2014 at 3:11 pm
Copy link
You may adjust custom CSS for different screen sizes using what are called media queries.

I can help guide you to learn about these so you can write CSS for them on your own if you choose. To get started, you should check out this help page which explains the basics for how media queries work:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Please be aware that this can get quite involved if you are designing by adding your own custom HTML to the content of pages as I see you have done on http://ifdcorg.wordpress.com/mali/ instead of using the theme’s built in HTML structure and options. Because of this, when you ask for help, you should try to be very specific by including direct links (as you have done here, thank you) and also providing very clear explanations since you are taking customization to a high level! This is pretty cool! but also a little hard to follow in support if you are not clear. :)

The Arcade theme does have a responsive design built in already, which you can see here:
http://arcadedemo.wordpress.com/2014/01/31/responsive-design/

But that is for posts and not pages. Since http://ifdcorg.wordpress.com/mali/ is the page and you have added very specific very custom HTML to try to make a new column where there weren’t any before, you would need to also add your own custom CSS that you write to accommodate your custom HTML. The best way to start doing this would be to either stop adding custom HTML *if* it isn’t needed and if you can use the theme’s responsive design which is already built in (such as on posts) —or— if you want to keep the page and keep working on your own custom HTML then I would recommend starting by adding appropriate class names to the HTML. For example, if you added class=”myrightpagecolumn” (or whatever name you want) to the div you added for the right column inside the http://ifdcorg.wordpress.com/mali/ page, then you could add a CSS rule inside a media query like this to make adjustments to small screens only:
```
@media screen and (max-width: 769px) {
	.myrightpagecolumn {
		width: 100% !important;
	}
}
```
This can become very involved so make sure to be careful as you make edits! I can see your custom HTML and CSS becoming quite complex already and that it will take some time and patience for you to learn if that’s something you want to do. :) We are here to guide you to get you started and to make sure the tools are working properly.

No items found.