topic Re: Stacking Images and Content - Order Needs to Change in Responsive in CMS Development

Stacking Images and Content - Order Needs to Change in Responsive

MNault — Mon, 11 Jan 2021 19:42:07 GMT

I need to recreate this page: https://redpathcpas.com/industries/

The images for each category are staggered from left to right but when it is viewed in responsive mode, it needs to show content, then the image. How do I get it to change the stack in the appropriate order and not content, image, image, content, content, image, etc.

This is what my work in progress looks like (view as mobile to see what I mean): https://info.redpathcpas.com/redpath-industries

Re: Stacking Images and Content - Order Needs to Change in Responsive

piersg — Tue, 12 Jan 2021 14:41:14 GMT

Hi @MNault, you can use the order property of flexbox to do this.

The div that contains both the text and image should be given display: flex and then on mobile flex-direction: column. Then you can add whatever order you want for the text and image e.g. order: 1. In the below example I've used the current classes from your page that will work but because they're default Hubspot layout classes they'll also apply elsewhere (e.g. the nav) so you'll need to add more specific clases.

.row-fluid { width: 100%; display: flex; } @media (max-width: 768px) { .row-fluid { flex-direction: column; } /* span4 class is text and span8 is image on your page */ .span4 { display: flex; order: 2; } .span8 { order: 1; display: flex; } }

Re: Stacking Images and Content - Order Needs to Change in Responsive

MNault — Tue, 12 Jan 2021 14:13:02 GMT

Ok, I will give this a shot...just one question, sorry I'm very green at dev....when you say "then on mobile flex-direction: column" where exactly do I place that for the mobile? Or does it go in the in-line styling with the "display:flex"? Thank you in advance for your help, I so appreciate this.

Re: Stacking Images and Content - Order Needs to Change in Responsive

piersg — Tue, 12 Jan 2021 14:40:50 GMT

That's what this bit of the CSS I posted is for @media (max-width: 768px) { ... } This is media query which defines CSS stylings for a specific rule, in this case if the screen is less than 768px (i.e. mobile) the rules in it will apply. Media queries can't be added inline, they have to be added in a stylesheet or in a <style> in HTML; you could put the above code in the advanced settings of the page in the Hubspot editor in between <style> ... </style> tags.

Re: Stacking Images and Content - Order Needs to Change in Responsive

MNault — Tue, 12 Jan 2021 15:16:47 GMT

Thank you so much! That worked. I really appreciate your help!

Re: Stacking Images and Content - Order Needs to Change in Responsive

MNault — Tue, 12 Jan 2021 15:19:05 GMT

Actully, one more quick questions...the stacking is perfect but I do notice that the logo and menu are now stacked at the top. Is there something I need to add to avoid that happening?

Re: Stacking Images and Content - Order Needs to Change in Responsive

piersg — Tue, 12 Jan 2021 16:18:31 GMT

Yeah, the row-fluid class is a default Hubspot layout class so the styling will also apply elsewhere (e.g. the navigation at the top). Ideally you would add your own custom class to that wrapping div e.g. left-right-block and your code can be

.left-right-block { width: 100%; display: flex; } @media (max-width: 768px) { .left-right-block { flex-direction: column; } .left-right-block .span4 { display: flex; order: 2; } .left-right-block .span8 { order: 1; display: flex; } }

If you can't do that you can do this, based on your current code:

.footer-container .row-fluid { width: 100%; display: flex; } @media (max-width: 768px) { .footer-container .row-fluid { flex-direction: column; } .footer-container .row-fluid .span4 { display: flex; order: 2; } .footer-container .row-fluid .span8 { order: 1; display: flex; } }

Re: Stacking Images and Content - Order Needs to Change in Responsive

MNault — Tue, 12 Jan 2021 16:55:34 GMT

Thank you so much! I went with the second option and it worked great! I appreciate this more than I can express. Have a fabulous day!

Re: Stacking Images and Content - Order Needs to Change in Responsive

piersg — Tue, 12 Jan 2021 16:57:44 GMT

No worries, you're welcome. You too!

Re: Stacking Images and Content - Order Needs to Change in Responsive

RajKSM — Thu, 04 Apr 2024 23:12:49 GMT

This was helpful, thanks!