Jump to content

Reducing padding and font size in mobile view

Recommended Posts

Hello All 🙂

I am wondering why my website looks different on mobile than it does in the "mobile preview" online. See screenshots for examples. Is there a CSS that can fix this?

1. Font size is a bit bigger 

2. There is padding under my product blocks that is not there on the preview

3. Additionally, might anyone be able to assist with reducing the vertical padding on my review carousel block?

Website URL: https://silkyloungewear.squarespace.com/config/

Thanks! 

Lydia

IMG_4649.PNG

IMG_4650.PNG

IMG_4651.PNG

Screenshot 2023-03-26 at 7.26.55 pm.png

Screenshot 2023-03-26 at 7.27.00 pm.png

Link to comment
  • Replies 9
  • Views 494
  • Created
  • Last Reply

Top Posters In This Topic

(Just so you know, you linked your dashboard, which we can't access, not the page in question.)

On your first question, different browsers will render the same page slightly differently, even on the same screen size, and of course they will be slightly different on the same browser across different screen sizes. You can't force how it will look, but you can change the mobile font size with CSS. You can even change it only for a specific block. However, you might want to test that. There are tools online that will render your site on various screen sizes.

To reduce the space on your carousel block, try adding this to Design=>Custom CSS:

@media screen and (max-width: 768px)
{
.user-items-list {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
   }
}

Link to comment
15 minutes ago, qosmic said:

(Just so you know, you linked your dashboard, which we can't access, not the page in question.)

On your first question, different browsers will render the same page slightly differently, even on the same screen size, and of course they will be slightly different on the same browser across different screen sizes. You can't force how it will look, but you can change the mobile font size with CSS. You can even change it only for a specific block. However, you might want to test that. There are tools online that will render your site on various screen sizes.

To reduce the space on your carousel block, try adding this to Design=>Custom CSS:

@media screen and (max-width: 768px)
{
.user-items-list {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
   }
}

Thanks for your explanation qosmic!

Oops! I didn't realise that was not the correct link - is this one the one that is needed? https://www.silkyloungewear.com

Unfortunately the code didn't work for mobile view! Might there be another reason for this?

Link to comment
  • 2 weeks later...

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] * {
    font-size: 20px;
}
.fe-641fc0581eada77a380a097a {
    grid-template-rows: repeat(15,minmax(24px, auto)) !important;
}
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] ul {
    min-height: unset !important;
}
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] .slide-content {
    margin:0 !important;
}
}

 

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
2 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] * {
    font-size: 20px;
}
.fe-641fc0581eada77a380a097a {
    grid-template-rows: repeat(15,minmax(24px, auto)) !important;
}
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] ul {
    min-height: unset !important;
}
.user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] .slide-content {
    margin:0 !important;
}
}

 

Thank you so much for your help @tuanphan! It worked, however the arrows are now sort of overlapping the text. Is there anything I can do to move them (e.g. to the bottom)?

image.png

Link to comment
On 4/16/2023 at 7:48 PM, SilkyLoungewear said:

Thank you so much for your help @tuanphan! It worked, however the arrows are now sort of overlapping the text. Is there anything I can do to move them (e.g. to the bottom)?

image.png

How about move it to left/right?

Use this new code

@media screen and (max-width: 767px) {
    .user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] * {
        font-size:15px;
    }

    .fe-641fc0581eada77a380a097a {
        grid-template-rows: repeat(15,minmax(24px,auto)) !important;
    }

    .user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] ul {
        min-height: unset !important;
    }

    .user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] .slide-content {
        margin: 0 !important;
    }
    .user-items-list-item-container[data-section-id="63c4b03de629af32617d51e9"] .mobile-arrows {
        top: 50% !important;
        transform: translateY(-50%);
        bottom: unset !important;
        margin: 0 !important;
        justify-content: space-between !important;
    }
}

 

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.