Can anyone help me with responsive edits to by Landing Page?

SOLVE
Occasional Contributor

Hi guys,

 

Can anyone assist me to change the stacking order on this minisite so that the form appears below the banner + main text? https://landing.covercy.com/agent_ms_home

 

Currently, when viewed by mobile, reaching the form requiers quite a lot of scrolling. 

One solution woud be to move the form to the left of the template, but then it wouldnt be intuitive. 

 

Thanks

Gidon

1 Accepted solution

Accepted Solutions
Top Contributor

Hi @GidonJ and @jzimmermann,

You can use this styling for making the right column come first in mobile

@media (max-width:767px){

.stack-row > .row-fluid-wrapper > .row-fluid {
    display: flex;
    flex-direction: column-reverse;
}

/* .stack-row is the parent class */

}


@GidonJ I checked the page and issue is solved now. If you want to style it anywhere without using float, you can follow the above code.

3 Replies 3
Community Manager

Hello @GidonJ I took a look at your site, and it looks as if this has been acheived - am I correct in this assumption? If you're still stuck / require help let me know and I'd be happy to connect you with one of our experts. 

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hi Róisín! 

 

I'm actually creating a page and wondering the same thing here myself. Do you happen to have any insight you'd be able to share? 

 

I've actually created a separate post for this here (https://community.hubspot.com/t5/COS-Design-Support/Trouble-changing-the-stacking-order-in-mobile-vi...) so you can see what we're looking at. 

 

Thanks in advance for any help! 

Top Contributor

Hi @GidonJ and @jzimmermann,

You can use this styling for making the right column come first in mobile

@media (max-width:767px){

.stack-row > .row-fluid-wrapper > .row-fluid {
    display: flex;
    flex-direction: column-reverse;
}

/* .stack-row is the parent class */

}


@GidonJ I checked the page and issue is solved now. If you want to style it anywhere without using float, you can follow the above code.