Objects moving on window resize

Hi all,

Struggling with something on a blog page:

http://blog.innerdrive.co.uk/read-this-now

Our brochure and book modules (custom html modules) on the sidebars are taking some info from our style sheet:

{{ get_public_template_url(“custom/page/InnerDriveJuly2016-theme/InnerDriveJuly2016-style.css”) }}

It is telling these modules to move as the window is resized, but the point in which these side modules swap to appearing at the bottom of the page is too far in, and causes an overlap with our blog posts.

Does anyone know a work around for this so these modules move to the bottom of the page before they begin to overlap? (ideally somethign that controls this with a percentage of the page?)

I hope this is clear enough! Let me know any problems.

@georgenichols in each post you have an inline style “width: 900px” - remove that, and you’re good to go.

Hi Stefen, thanks for your reply.

This was something I had tried and while it provides a temporary solution it doesn’t quite do what I’d like as I’d really like to keep the post at the 900 px length so it covers the whole page and doesn’t leave a large gap between the posts and modules on the right hand side if that makes sense? So ideally I want the brochure and book to fall below the posts earlier so they don’t overlap.

Let me know if I can be any clearer or if I misunderstood your solution!

Gweo

@georgenichols if you’re using the template builder, drag the column so its approximately 900px on desktop. If you’re editing the code directly, change the first column from “span6” to “span8” and the second “span6” to “span4”. Doing it this way you are working with the COS responsive grid rather than fighting against it.