issue with LP resizing

Livia008
Level 2

issue with LP resizing

Hello!

 

I'm quite new to Marketo LP, I'm having some issues with the mobile resizing for the below

https://info.tmforum.org/Event2021-10-07-DigitalLeadershipSummitTotogi_LPNewBrand.html

 

It's not resizing correctly as it seems there is something pushing the sides, also from mobile it's not showing great, the bottom register section splits weirdly, and the countdown letter overlap.

 

I've already tried to add some margin/width: 100%/auto to the body css, flex and display properties but nothing worked. Does anyone manage to find the issue?

 

Many thanks in advance for your help,

Livia

Tags (4)
13 REPLIES 13
Franky_Ruyssch2
Level 4

Re: issue with LP resizing

Not clear what your issue exactly is. Can you add a screenshot pointing the problem?

Franky Ruysschaert
Livia008
Level 2

Re: issue with LP resizing

Apologies, please see the updated link https://info.tmforum.org/register-now.html 

Franky_Ruyssch2
Level 4

Re: issue with LP resizing

Hi,

 

had a quick look, hard at this point to find the problem exactly.

 

I see several issues while scaling towards mobile:

- One af the biggest problem is the possibility to scroll horizontally

- One other topic is that text falls of..

See screenshots to show it.

I would disable some sections, and try to solve the problems gradually.

 

Schermafbeelding 2021-09-10 om 09.00.52.pngSchermafbeelding 2021-09-10 om 09.01.15.png

Franky Ruysschaert
Livia008
Level 2

Re: issue with LP resizing

Hi Franky,

 

Thanks for your reply!

 

Can I ask which device are you using? 

 

See my screenshots below:

 

It resizes on mobile,  countdown is overlapping a little with the S at the end of MINUTES and beginning of SECONDS

Screenshot 2021-09-10 at 14.08.44.png

 This part breaks oddly. thinking to add some padding to the left to make it readable + full blue bg on mobile

 

Screenshot 2021-09-10 at 14.08.51.png

 Using the same template on another page, I can see the horizontal scrolling bar instead of having the page resizing correctly:

Screenshot 2021-09-10 at 14.12.22.png

Link here: https://info.tmforum.org/DigitalLeadershipSummit_register.html

 

Thanks,

Livia

Jasbir_Kaur
Level 5

Re: issue with LP resizing

Hi @Livia008 

 

I have gone through the shared page, and analyzed that you have to do some adjustment in CSS.

 

Please remove the below CSS, it will eliminate the scroll from the Desktop view.

 
Livia008
Level 2

Re: issue with LP resizing

Thanks so much, Jasbir!

 

The countdown & resizing issue was resolved, as well as the desktop scrolling.

 

It is still looking with cut corners tho (I would like the side to show completely, see below).

I tried adding padding and margin but it didn't work.

Screenshot 2021-09-15 at 10.08.01.png

 

 

Can you think of any solutions?

 

Many thanks,

Livia

Jasbir_Kaur
Level 5

Re: issue with LP resizing

Hi @Livia008,

 

It seems you are not using properly bootstrap here, that's why this issue occurring.

 

We can do one thing, on the <section> tags please use a class which have a max-width and width: 100%.

 

I think this will solve your problem of cutting the corners.

 

Let me know in case of any concerns.

 

Thanks!

Jasbir

Livia008
Level 2

Re: issue with LP resizing

Thanks Jasbir,

 

looks like it's not working?

https://info.tmforum.org/test-new-brand.html

Jasbir_Kaur
Level 5

Re: issue with LP resizing

Hi @Livia008,

 

Try to use the below - 

 

.containers{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 0.8%;
}

 

Let me know in case of any concerns.

 

Thanks!

Jasbir