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

SOLVE
GidonJ
Participant

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
Solution
Anonymous
Not applicable

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.

View solution in original post

4 Replies 4
roisinkirby
HubSpot Product Team

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. 

0 Upvotes
jzimmermann
Participant

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! 

Solution
Anonymous
Not applicable

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.

View solution in original post

Hollyce
Contributor | Diamond Partner

YAY great simple solution. Thanks!