Mobile View Editing

Marketing & Content Hub Blog, Website & Page Publishing
1

Is it possible edit the mobile view of a landing page independently in CMS Hub? My ladning page looks great on deskptop but the form is to far down the page on mobile along with a few other issues. Thanks

2

Hi @Lupo

I typically use CSS to show/hide my content based on CSS Media Queries.

This CSS example hides the mobile div on bigger screens (assuming mobile is 600px – I usually add several breaks but this is simplified).

div.desktop {
 display: none;
}
@media only screen and (min-width: 600px) {
 div.mobile {
 display: none;
 }
 div.desktop {
 display: block;
 }
}

In some cases I’ve loaded divs for mobile, tablet and desktop to get exactly what I want.

It makes your page slightly heavier but that’s the price we pay for being control freaks ;o)

Have fun

Mike <=control freak

3

Mike,

Where exactly do I put this code? I’m sorry but I’m still kind of new to CSS.

4

Can you use Smart Rules instead? Or is that not recommended.

5

Can you post a link to an example page you are struggling with?

While hiding/displaying content is a possibility as mentioned, there are often better ways to see about improving page design. Typically content is rendering left to right and right is pushed down, and the form may not be optimized as well as it could for desktop.

In more advanced configurations, this is where the CSS grid could come into play as you can move the grid depending on the mobile/desktop layout. It’s a bit more advanced to code, but has a lot more flexibility. This can also be done in Bootstrap with the order command. Personally speaking, I would recommend posting this to Hubspot to see if they can implement the same thing in their visual editor because as you can see from those frameworks, reordering is possible, and can often be necessary for website development.

6

I don’t think it is possible because I have tried my best to edit it but no changes to the call to action button are not okay at all on mobile view

7

Hi @Newtons1234

Anything is possible!

As @Ben_M suggests – if you post a link to the page (publicly or privately) we may be able to help.

Cheers

Mike

8

Where I can put those code?