Docs

[Mick Shah]

Hi I have this page:

https://www.mikiphotography.info/team/

Which displays great on desktop and mobile.

I created an exact copy of the page to try things out and displays great on desktop but not on mobile:

https://www.mikiphotography.info/test-1/

Is there something I can do about this please?

[Nico]

Hi There,

Thanks for writing in.

I could see the difference between the two pages.

The correct page has this class on your container for the whole team – .teamprofile and has this in your custom page CSS:

@media (max-width: 1199px) and (min-width: 992px)
(index):1248
.x-container.team-profile .x-feature-box {
    min-height: 523px;
}

Hope it helps.

Let us know how it goes.

Thanks.

[Mick Shah]

Hi there please help me out. So the first page was created by my designer and the second by me but it’s an exact copy – where should I put that stuff?

[Mick Shah]

Hi there please help me out. So the first page was created by my designer and the second by me but it’s an exact copy – where should I put that stuff to get the page I created to work?

Thanks

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Mick Shah]

This reply has been marked as private.

[Lely]

Hi Mick,

It is because of the 50px margin. On smaller screen size, 50px is too much. This will narrow the space alloted for the content thus the content will overflow on it’s container. Try to remove margin: 50px; from the style field and reduce Graphic spacing from 100px to 20px.

Hope this helps.

[Mick Shah]

This reply has been marked as private.

[Rad]

Hi there,

I see that you uses gap on that section, how about hiding it on mobile? Or use different gaps for each device. You can inspect your gap and it should have HIDE BASED ON SCREEN WIDTH option.

Example, you can hide big gap on mobile but display small gap, then hide small gap on desktop but display big gap.

Hope this helps.

[Author]

Posts