Reducing padding and font size in mobile view

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

(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;
   }
}

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?

The reason is that I can't remember off the top of my head what the selector is for that block! 😅 I'll have to check when I'm not mobile.

22 hours ago, qosmic said:

The reason is that I can't remember off the top of my head what the selector is for that block! 😅 I'll have to check when I'm not mobile.

Ah! Thanks qosmic 🙂

Is there any way that I can check from my end?

On 3/29/2023 at 2:07 PM, qosmic said:

The reason is that I can't remember off the top of my head what the selector is for that block! 😅 I'll have to check when I'm not mobile.

Not sure if this is helpful, but the block in question is the one from the "Testimonials" section!

I imagine @tuanphan might know the answer to this one without having to dig into it.

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;
}
}

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)?

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)?

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;
    }
}