# Mobile View Editing

**URL:** <https://community.hubspot.com/t/mobile-view-editing/20184>\
**Category:** Blog, Website & Page Publishing\
**Tags:** landing-pages\
**Created:** [April 18, 2020, 5:35pm UTC](https://community.hubspot.com/t/mobile-view-editing/20184 "2020-04-18T17:35:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lupo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lupo/32/76793_2.png) [@Lupo](https://community.hubspot.com/u/Lupo)\
**Post date:** [April 18, 2020, 5:35pm UTC](https://community.hubspot.com/t/mobile-view-editing/20184/1 "2020-04-18T17:35:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mike\_Eastwood](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mike_eastwood/32/70075_2.png) [@Mike\_Eastwood](https://community.hubspot.com/u/Mike_Eastwood)\
**Post date:** [April 18, 2020, 11:32pm UTC](https://community.hubspot.com/t/mobile-view-editing/20184/2 "2020-04-18T23:32:35Z")

</div>

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).

```auto
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

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 8, 2021, 10:21pm UTC](https://community.hubspot.com/t/mobile-view-editing/20184/3 "2021-08-08T22:21:03Z")

</div>

Mike,

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

---

<div class="post-metadata">

**Author:** ![PMattick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pmattick/32/30191_2.png) [@PMattick](https://community.hubspot.com/u/PMattick)\
**Post date:** [September 27, 2021, 9:51am UTC](https://community.hubspot.com/t/mobile-view-editing/20184/4 "2021-09-27T09:51:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [April 19, 2020, 1:32pm UTC](https://community.hubspot.com/t/mobile-view-editing/20184/5 "2020-04-19T13:32:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Newtons1234](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/newtons1234/32/27089_2.png) [@Newtons1234](https://community.hubspot.com/u/Newtons1234)\
**Post date:** [April 22, 2020, 9:47am UTC](https://community.hubspot.com/t/mobile-view-editing/20184/6 "2020-04-22T09:47:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mike\_Eastwood](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mike_eastwood/32/70075_2.png) [@Mike\_Eastwood](https://community.hubspot.com/u/Mike_Eastwood)\
**Post date:** [April 23, 2020, 1:03am UTC](https://community.hubspot.com/t/mobile-view-editing/20184/7 "2020-04-23T01:03:11Z")

</div>

Hi @Newtons1234

Anything is possible!

As [@Ben\_M](https://community.hubspot.com/t5/user/viewprofilepage/user-id/87451) suggests – if you post a link to the page (publicly or privately) we may be able to help.

Cheers

Mike

---

<div class="post-metadata">

**Author:** ![ASanPedro](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@ASanPedro](https://community.hubspot.com/u/ASanPedro)\
**Post date:** [September 28, 2023, 4:25am UTC](https://community.hubspot.com/t/mobile-view-editing/20184/8 "2023-09-28T04:25:40Z")

</div>

Where I can put those code?