[Resolved] Container overflow on mobile device

[Author]

Posts

[martinH-10]

Hello, I have experienced some strange behavior using toolset with astra theme. There is some kind of overflow on mobile device. Can you help me identify what is causing that?

It seems like the <div class="row"> is causing that. I dont really know why.

[martinH-10]

Can we fix all my sites using astra & tooslet? They are all fucked up on mobile. So it seems like a bigger problem.

It is same on this site: hidden link
also here: hidden link
also here: hidden link
also here: hidden link
also here: hidden link

Thank you.

[Shane]

Hi Martin,

Thank you for getting in touch.

I'm not so sure this one is being caused by our toolset plugins. On this site its a little hard to see the issue hidden link

However what you can try to do to ensure that the issue is not related to toolset is to temporarily disable all the toolset plugins and check your site again to see if the issue is still there.

Secondly if you've added any custom css to the site then I would remove it temporarily and check again.

Finally is it possible to get access to this site here hidden link

The issue is more visible here.

Thanks,
Shane

[martinH-10]

Hello Shane,

I prefer to work on site vodarium, because it is not public right now. If it is not visible for you, scroll to the footer and pull the page to the left with your mouse or finger on mobile. It is definitely problem with toolset.

[martinH-10]

I have found some things:

On archive pages: hidden link hidden link
It is caused by <div class="row"></div>
Check the first row after ast-row. Looks like the negative margins -15px are causing the problems. But I dont know their meaning... When I change the margin to 0 the layout is fixed, but its content have a big padding then...

On Posts and Pages: hidden link hidden link
It is caused by <div class="ast-container"></div>
Check the ast-container div. It has some padding-left .54em; padding-right: .54em;. When you disable it and use standard padding-left:20px; padding-right:20px; it works.

I dont really understand what is happening here.

[Shane]

Hi Martin,

This seems like an issue with the native theme.

Perhaps you just need to overwrite it using some css. I was trying to locate this computed style in a mobile view in chrome but it doesn't seem to show up.

You also have the option to make this correct in the theme's style.css or just add it to the css editor in the custom archive that you have on the page.

Thanks,
Shane

[martinH-10]

Hi Shane, you really do not see that? It is overflowing, so you need to move the page to the left to see that... Can you try again please?

[martinH-10]

I have already contacted Astra support and they told me that it is related to the Toolset. So they can see it but it is not theme problem...

[Shane]

Hi Martin,

I see the overflow and its not there when views is disabled.

What I can't find is the mobile css that you sent in your screenshot. I'm assuming the issue is only present on pages with a view on it correct?

As mentioned I would add the the corrective code to the view css editor so it only triggers on pages with this view.

@media only screen and (max-width: 544px)  {

.ast-container{
padding-left:20px; 
padding-right:20px; 
}
}

It could also be because of the bootstrap import, I see that bootstrap is adding its css to the bootstrap classes so this seems to be the main cause on the rows.

Thanks,
Shane

[martinH-10]

Hi Shane, I did some consultation with theme support too. The gave me this:

	@media (max-width: 544px){
		.ast-separate-container #content .ast-container
		.row{
		margin-left:0;
		margin-right:0;
		}
		}
		

Both CSS works, THANK YOU!

Maybe it help to someone.

Thank you for your investigation, help and time.

[martinH-10]

My issue is resolved now. Thank you!

[liatG]

This helped me too. Thank you!