Mobile view margin problem

Site URL: https://www.ramidress.com/

Try adding this to Design > Custom CSS

html, body {
	overflow-x: hidden;
}

Hi @tuanphan

I added your code which was great, it fixed my margin issues on deskop view.

Though on mobile view I'm still having a reccurent issue coming back and forth, see the extra margin underneath the footer on this screenshot.

Could you please help?

Thanks

On 3/31/2022 at 8:59 PM, Sylva8787 said:

Hi @tuanphan

I added your code which was great, it fixed my margin issues on deskop view.

Though on mobile view I'm still having a reccurent issue coming back and forth, see the extra margin underneath the footer on this screenshot.

Could you please help?

Thanks

 

It looks like you change site color. It looks fine to me. DId you solve it?

Sorry for the delay, I solved the footer issue though the background picture on the home page (first picture) has been resized on mobile view. https://atoaadigital.com 

I'd like it to take up the entire screen when accessing the website on mobile, though it's way smaller than what it should be I guess (see screenshot).

What would be the right way to fix this? Many thanks

On 4/8/2022 at 12:10 AM, Sylva8787 said:

Sorry for the delay, I solved the footer issue though the background picture on the home page (first picture) has been resized on mobile view. https://atoaadigital.com 

I'd like it to take up the entire screen when accessing the website on mobile, though it's way smaller than what it should be I guess (see screenshot).

What would be the right way to fix this? Many thanks

You mean make red banner section fullheight on mobile?

Yes, the red banner which is actually the background of my picture.

I found how to extend it using the following code block :

<style>
  @media screen and (max-width: 767px) {
    article section:first-child {
        height: 92vh !important;
        min-height: unset !important;
        margin-top: 0vh;
    }
}
</style>

Though I was wondering if there was a CSS code that would simply extend the image background in full so that it'd fit the entire screen on mobile view?
The code block works fine when it comes to extending the picture's height, though it messes with the position of my other text/code blocks (I'd want them to appear lower on the picture - on mobile view - but they remain where they currently are now).

Thanks for your help, it is much appreciated

On 4/10/2022 at 10:51 PM, Sylva8787 said:

Yes, the red banner which is actually the background of my picture.

I found how to extend it using the following code block :

<style>
  @media screen and (max-width: 767px) {
    article section:first-child {
        height: 92vh !important;
        min-height: unset !important;
        margin-top: 0vh;
    }
}
</style>

Though I was wondering if there was a CSS code that would simply extend the image background in full so that it'd fit the entire screen on mobile view?
The code block works fine when it comes to extending the picture's height, though it messes with the position of my other text/code blocks (I'd want them to appear lower on the picture - on mobile view - but they remain where they currently are now).

Thanks for your help, it is much appreciated

If make section 92vh, the image will need to zoom in.

You can consider moving image position to make it better

<style>
  @media screen and (max-width:767px) {
  article section:first-child img {
    object-position: 10% 50% !Important;
}
  }
</style>

Amazing, thank you so much !!