Create Responsive Column Layout on a Page

lulucho · Member · May 29, 2015 at 2:58 pm
Copy link

Add topic to favorites
I’m using Edin a responsive theme.

I would like to create column layout that is responsive on this page: http://www.105gibson.com/contact

It there anyway I can do this just by adding html code? I have no plans to get the css upgrade yet. Thanks.

The blog I need help with is: (visible only to logged in users)
kathrynwp · Staff · May 29, 2015 at 3:40 pm
Copy link
You could add two columns of equal width in HTML/Text view, like this:
```
<div style="width: 45%; float: left;">

Left col
</div>
<div style="width: 45%; float: right;">

Right col

</div>
```
Those columns will remain side-by-side, even at smaller screen sizes. To do real responsiveness, you need media queries, and that requires custom CSS.

Let me know if this does the trick.
lulucho · Member · May 29, 2015 at 4:19 pm
Copy link
Thanks Kathryn, this is what I currently have on the site.

Is there anyone I can cultivate the existing css queries in the theme since Edin is a responsive theme?
kathrynwp · Staff · May 29, 2015 at 4:28 pm
Copy link
Media queries can’t be placed within the body of your text, you’ll need Custom CSS for that.

You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Responsive Design with CSS3 Media Queries
lulucho · Member · May 29, 2015 at 4:32 pm
Copy link
I see, guess I can only compromise with what I have so far then…

Thanks!

No items found.