Archived topic

Responsive Layout

8 replies · Started by Graham Leatherbarrow on March 19, 2015

Viewing posts 1–9 of 9

March 19, 2015 at 6:16 am #88604

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.

March 19, 2015 at 12:53 pm #88821

Hi Graham,

I can't seem to access that link?

Let me know :)

March 19, 2015 at 1:07 pm #88826

Hi Tom,

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

Graham.

March 19, 2015 at 1:08 pm #88828

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?

March 19, 2015 at 1:17 pm #88831

Tom,

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

Graham.

March 19, 2015 at 1:19 pm #88832

Tom,

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

Graham.

March 19, 2015 at 1:22 pm #88834

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%;
      }
}

March 19, 2015 at 2:10 pm #88851

Hi Tom,

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

Graham.

March 19, 2015 at 11:47 pm #88939

Happy to help :)

This archived topic is closed to new replies.

Start building better websites today.