order of loading page components

on the page at
http://harwoodmarinegroup.com/products/ship-building/

I have set up a CSS div to float the 6 thumbnail images to the right
.side-by-side { float: right; margin-right: 5px }

On the normal page view the layout works fine however on the mobile page the images load before the text

is there a way to force the wording to load first and have the images below

I have tried physically moving the images to the bottom in the page editor but it ruins the nice layout of the normal page view

 

Hello,

I have checked the page URL.

I found that you have inserted the text and images both in the paragraph tag.
You have inserted the image first and the text at last that's why it shows images first.

Please replace their position i.e insert text first and then images.

Thanks,
Praveen

 

Thanks ... but.... If I put the text first and the image after the images appear to the right - but below the text (to aligned to the top alongside the text)

see the page now
http://harwoodmarinegroup.com/products/ship-building/

- it now appears ok on the mobile
- but incorrect on the normal page

the text view of the page is as follows

We combine the latest design technology & expertise in the manufacture of aluminium & steel vessels.
Harwood Marine Ship Building services include including:
<ul>
<li class="p1">Commercial vessels</li>
<li class="p1">Freight ships</li>
<li class="p1">Small ships</li>
<li class="p1">Fast ferries</li>
<li class="p1">Barges</li>
<li class="p1">Patrol boats</li>
<li class="p1">Work boats, tugboats</li>
<li class="p1">Cruising restaurants</li>
<li class="p1">Luxury yachts</li>
<li class="p1">Racing yachts</li>
</ul>
<span style="font-size: 8pt;">click images for larger versions</span>

<div class="side-by-side">
<img class=" wp-image-85 size-thumbnail alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building1-150x150.jpg" alt="ship-building1" width="150" height="150" /><img class=" wp-image-87 size-thumbnail alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building3-150x150.jpg" alt="ship-building3" width="150" height="150" />
<p class="p1"><img class=" size-thumbnail wp-image-86 alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building2-150x150.jpg" alt="ship-building2" width="150" height="150" /><img class=" wp-image-88 size-thumbnail alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building4-150x150.jpg" alt="ship-building4" width="150" height="150" /></p>
<p class="p1"><img class=" size-thumbnail wp-image-89 alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building5-150x150.jpg" alt="ship-building5" width="150" height="150" /><a href="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building61.jpg"><img class=" size-thumbnail wp-image-91 alignnone" src="http://harwoodmarinegroup.com/wp-content/uploads/2015/05/ship-building61-150x150.jpg" alt="ship-building6" width="150" height="150" /></a></p></div>

 

Hi,

I have checked the URL.

Try the CSS code given below:-

Code:

@media only screen and (min-width: 768px){
.side-by-side {
  margin-top: -317px !important;
}
}

Thanks,
Praveen

 

well - that works for that one single page as the -317px is the exact dimension for that page (both mobile and normal pages load correctly)

however there are several pages using this eg
http://harwoodmarinegroup.com/products/tugs-workboats/
and
http://harwoodmarinegroup.com/products/yacht-building/
which now load the images too far up

I guess I could create a css rule for each individual page but if the client edits the pages and adds more text the layout will be incorrect again

I also tried placing images in a table but then the images do not show on the mobile layout

is there another alternative for image placement?

 

Hello,

Luckily, I have an alternative way for this....

Create a separate div for both section and apply some CSS on them.
If you understand the trick, then apply it by yourself,

OR

Send us your website WordPress login details at [email protected] along with the thread link.
I will try to fix it.


Thanks,
Praveen

 

thanks - but don't worry - I have opted for a simpler layout

 

ok - I persevered and got it

<divstyle="width:50%;float: left;"></div><divstyle="margin-left:50%;"></div>
whist not exactly as I wanted it - but it will suffice

I have removed the other from the custom css and it is working fine