Responsive Layout

[Graham Leatherbarrow]

Hi Tom,

Currently building a listing site which I started to use tables for the layout. It doesn’t look good in responsive, so I have abandoned the table layout and started to use divs for each inline block, one left with details and one right with photo, both divs on same line horizontally.

For some reason the icons break and drop a line, even though there looks to be enough space to accommodate them in the small window. Any idea how to solve this:

http://www.isleofskyebedandbreakfast.com/wordpress/trotternish-bed-and-breakfast/

Additionally, the photo is squeezed right up against the text, again ideas please?

Thanks for your time,
Graham.

[Tom]

Hi Graham,

I can’t seem to access that link?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Graham Leatherbarrow]

Hi Tom,

That’s strange because I’ve just clicked on it from my post on here and goes there just fine!?

Graham.

[Tom]

I’m getting a “403 Forbidden” error telling me I don’t have permission to access that URL.

Maybe give your hosting a quick call to make sure everything is set up correctly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Graham Leatherbarrow]

Tom,

I suspect it might have something to do with the fact it’s on two lines in post?

Graham.

[Graham Leatherbarrow]

Tom,

So sorry, forgot the htaccess in the root controlling access. Now give a go!

Graham.

[Tom]

We can “mobilize” those two elements to be full width on mobile like this:

@media screen and (max-width:768px) {
      .details,
      .photo {
            float: none;
            width: 100%;
      }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Graham Leatherbarrow]

Hi Tom,

That is superb! Does it very well, many thanks for your time and trouble, much appreciated.

Graham.

[Tom]

Happy to help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts