Jump to content

Mobile view margin problem

Recommended Posts

  • Replies 8
  • Views 669
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...

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

 

 

Edited by Sylva8787
Link to comment
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

 

InkedMobile view_LI.jpg

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

screenshot_homepagepicture.jpg

Link to comment
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

screenshot_homepagepicture.jpg

You mean make red banner section fullheight on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.