Outreach Pro Responsive (Home-bottom, html tables)

[djace]

Hey all,

I was wondering how to make my home-bottom widgets in Outreach Pro responsive.

I only wanted three featured pages there so I found a CSS snippet here:

.home-bottom .widget {
float: left;
margin-left: 2.5641025641026%;
width: 31.076923076923%;
}

.home-bottom .widget:nth-child(3n+1) {
clear: both;
margin-left: 0;
}

This is probably what messed up the responsiveness of the theme. Is there a way to fix this through the media queries?

I also have a second question regarding HTML tabless. On the Contact Us page, I have a table with addresses and embedded google maps. Is it possible to make this page responsive? I would like for the address to appear first and then the map on mobile, repeat for the second address and map.

Thanks!

http://wesn.ca/

[djace]

Well, I've somewhat fixed the home-bottom widgets responsive problem. I don't know if it's the best fix and I'm still trying to figure out the HTML tables..

I stuck these into the media queries to fix the home-bottom widgets:

.home-bottom .widget:nth-of-type(1),
.home-bottom .widget {
margin: 0;
width: 100%;
}

.home-bottom .widget:nth-of-type(2),
.home-bottom .widget {
margin: 0;
width: 100%;
}

.home-bottom .widget:nth-of-type(3),
.home-bottom .widget {
margin: 0;
width: 100%;
}

[coralseait]

Don't use tables for your layout, but Genesis Column Classes http://my.studiopress.com/tutorials/content-column-classes/. They'll do exactly what you want and be responsive. If you like you can try Genesis Easy Columns for ease of use from TinyMCE https://wordpress.org/plugins/genesis-easy-columns/

To replicate a table you can do (this is a two column table, but works with more columns):

column-class
column content
/column-class
clear fix
column-class
content
/column-class
clear fix
etc

Note you'd replace column-class with either the divs from the genesis column class tutorial I linked or the shortcodes if using Easy Columns

---

Coral Sea IT

[Author]

Posts