How change div order in mobile version

HTML & CSS
1

Hi from one minute snowing to next minute sunny York UK :slight_smile:

On this site www.davidclick.com I would like the picture grid to sit under the address when viewed on a mobile device. The problem ive got at the mo is the picture grid sits at the bottom of the page when viewed on my iPhone.

Is there a way to change the position of <div class="picgrid"> so the images sit under <div id="contact" class="fluid "> for example so users dont have to scroll to the bottom of the page to see the images in the mobile version?

Is flexbox the answer, I came across this :https://j.eremy.net/flexbox-for-mobile-content/

Grazie mille,
David

2

Flex box does have the ability to change the order of sibling elements.
I can’t test properly in inspect this time, because there are not the selectors to edit for all elements at that size, so a bit of guess work.
The common parent is the body element, so in the small query, give that display:flex and flex-flow:column, then give #content-inner-venue {order:1}
That will put it to the bottom, as other siblings will have the default order of 0, so all sibling elements that should remain below it should also have order:1.

Another idea that may or may not work, is to actually change the order of the dom and make the pic grid be the float instead of content-inner-venue.

1 Like
3

Hi,

As Sam suggested this should work but will need checking.

@media screen and (max-width: 793px){
body{display:flex;flex-direction:column}
#imagewrap{order:-2}
.picgrid{order:-1}
#content-inner-venue iframe{width:100%}
}

Note that your iframe was also too wide for smaller screens

1 Like
4

Wow that worked thank you!

200×200 24.6 KB

5

Working on the iframenow :wink:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.