Image Blocks on Mobile

Website: www.momuofficial.com

My poster image blocks turn out weird on a tablet. On the phone, it's okay because it stacks, but when it's on a tablet, it appears side-by-side and the text overruns the box (image attached). I tried using CSS to fix it—I tried to force it to appear on a tablet as it would on a phone but to no avail.

Also, for the overlap image block which is just slightly less of an issue than the poster image block. On the tablet, the text too small.

Any help is appreciated.

@MichelleJ 1. Increase Image Card  width to 100% on Tablet (currently 70%)

2. Remove position: absolute for image card on Tablet

3. Display: none this class: .sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic

(use block-id to target only How I can help boxes

Looks better

I'm sorry but I don't really understand how to do the things you've suggested. Brand new Squarespace user here! Could you explain more?

4 minutes ago, MichelleJ said:

I'm sorry but I don't really understand how to do the things you've suggested. Brand new Squarespace user here! Could you explain more?

I thought you knew CSS. If you know CSS, try above suggestion.

I know a bit of CSS, but most likely not enough to do what you're suggesting. Care to elaborate?

1 hour ago, MichelleJ said:

I know a bit of CSS, but most likely not enough to do what you're suggesting. Care to elaborate?

@media screen and (max-width:900px) and (min-width:641px) {
/* remove image */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-inset {
    display: none;
}
/* remove absolute */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-card-wrapper {
    position: relative;
}
/* change width 70 to 100 */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-card-wrapper .image-card {
    width: 100%;
}

}

15 minutes

Wow that worked! Thanks so much! Could I trouble you to explain what it is that the CSS is doing? 

Just now, MichelleJ said:

Wow that worked! Thanks so much! Could I trouble you to explain what it is that the CSS is doing? 

You used Image Blocks, so even if you don't use images, it still takes up space above. The first code to remove that.

2nd code .. difficult to explain ..

The third code, just increase the width of the content from 70% to 100%

On 12/9/2019 at 1:37 AM, tuanphan said:

@media screen and (max-width:900px) and (min-width:641px) {
/* remove image */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-inset {
    display: none;
}
/* remove absolute */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-card-wrapper {
    position: relative;
}
/* change width 70 to 100 */
div#block-yui_3_17_2_1_1574944842662_24065~.row .image-card-wrapper .image-card {
    width: 100%;
}

}

15 minutes

Should this code apply to the following problem? This is an image poster block (on desktop vs. mobile) and I tried this code using the correct block number and nothing happened. The button shows up below the image for mobile and the title doesn't show up at all. Do you have any advice? Let me know. Thank you!

4 hours ago, jgconsult said:

Should this code apply to the following problem? This is an image poster block (on desktop vs. mobile) and I tried this code using the correct block number and nothing happened. The button shows up below the image for mobile and the title doesn't show up at all. Do you have any advice? Let me know. Thank you!

 

 

Can you share link to page in screenshot?

17 hours ago, tuanphan said:

Can you share link to page in screenshot?

The site is private as it's not live yet

4 hours ago, jgconsult said:

The site is private as it's not live yet

21 hours ago, tuanphan said:

Can you share link to page in screenshot?

Do you think you can still help me without the site being live?

11 hours ago, jgconsult said:

 

Do you think you can still help me without the site being live?

Very Difficult. I need site url, to check the code.

If I added a password could you check it out? It's kdstyletest for www.kayladane.com

On 4/28/2020 at 3:56 AM, jgconsult said:

If I added a password could you check it out? It's kdstyletest for www.kayladane.com

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1585593367280_11373 .image-inset {
    padding-bottom: 150% !important;
}
div#block-yui_3_17_2_1_1585593367280_11373 img {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1585593367280_11373 figcaption.image-card-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/5e7cccb16aa83f28bd80be7d/1585668972324-9X9IH7XTXOE2BYGGDN78/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/faded3.jpg?format=1500w);
}
}

On 4/30/2020 at 8:07 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1585593367280_11373 .image-inset {
    padding-bottom: 150% !important;
}
div#block-yui_3_17_2_1_1585593367280_11373 img {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1585593367280_11373 figcaption.image-card-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/5e7cccb16aa83f28bd80be7d/1585668972324-9X9IH7XTXOE2BYGGDN78/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/faded3.jpg?format=1500w);
}
}

 

Thank you so much!!! I really appreciate it!

I have an issue with the text being bigger than the images on some tablets (specifically iPads). Is there a way to make it go from three images per row to two images per row for tablets? Currently, it just goes from three images per row to one image for phones. Is there another way to solve this problem?

I tried following the solutions above. It didn't work for me, but that might because I'm new to CSS.

Here is a link to the page: https://terreform.com/research

Thanks for the help! 

9 hours ago, Tommy1 said:

I have an issue with the text being bigger than the images on some tablets (specifically iPads). Is there a way to make it go from three images per row to two images per row for tablets? Currently, it just goes from three images per row to one image for phones. Is there another way to solve this problem?

I tried following the solutions above. It didn't work for me, but that might because I'm new to CSS.

Here is a link to the page: https://terreform.com/research

Thanks for the help! 

Add to Home > Design > custom CSS

@media screen and (max-width:640px) {
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .span-4 {
    width: 100%;
}
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .image-block {
    width: 45% !important;
    float: left !important;
    clear: none !important;
}
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .image-block img {
    width: 100% !important;
    top: 0 !important;
    height: auto !important;
}
}

@tuanphan

Hi! My name is Rebekah and I'm very new to squarespace and website building overall. I've been building my website on my own just by googling everything. I'm almost done with it, however I'm having a lot of trouble and have been trying to google solutions for the past 2 days and have tried a million codes and none of them work. You're the mane username I keep seeing in almost every thread so I thought I'd reach out directly. I'd GREATLY appreciate any help you can offer. I'm greatly satisfied with the desktop view of the website however i'm extremely dissatisfied with the mobile view.

My website is www.rebellebeauty.us

The image that appears on the homepage on the desktop view zooms in A LOT in the mobile view. Is there anyway to keep as much as the full view of the image when viewed on a mobile device?

Also my header texts are overlapping in the mobile view, is there anyway to fix this?

I also wanted to increase the size of the header texts a bit more in mobile view, like the 'Lash Out' on the home page.

Lastly, the 3 gallery image icons in the middle of the page, they take up a lot of space in mobile view. Is there anyway to make them smaller or to line the up horizontally how they are on the desktop view.

Thank you SO much in advance!

On 8/14/2020 at 7:37 PM, tuanphan said:

Add to Home > Design > custom CSS

@media screen and (max-width:640px) {
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .span-4 {
    width: 100%;
}
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .image-block {
    width: 45% !important;
    float: left !important;
    clear: none !important;
}
div#page-5f31bfae83a4ab215098f290>.row:nth-child(2) .image-block img {
    width: 100% !important;
    top: 0 !important;
    height: auto !important;
}
}

 

I tried adding this and it made the image size smaller for phones and made it look worse. It didn't change the display for tablets. I have custom CSS on the specific page, would that make a difference? Any other suggestions? Thanks! 

On 8/15/2020 at 8:30 AM, rngongo said:

@tuanphan

Hi! My name is Rebekah and I'm very new to squarespace and website building overall. I've been building my website on my own just by googling everything. I'm almost done with it, however I'm having a lot of trouble and have been trying to google solutions for the past 2 days and have tried a million codes and none of them work. You're the mane username I keep seeing in almost every thread so I thought I'd reach out directly. I'd GREATLY appreciate any help you can offer. I'm greatly satisfied with the desktop view of the website however i'm extremely dissatisfied with the mobile view.

My website is www.rebellebeauty.us

The image that appears on the homepage on the desktop view zooms in A LOT in the mobile view. Is there anyway to keep as much as the full view of the image when viewed on a mobile device?

Also my header texts are overlapping in the mobile view, is there anyway to fix this?

I also wanted to increase the size of the header texts a bit more in mobile view, like the 'Lash Out' on the home page.

Lastly, the 3 gallery image icons in the middle of the page, they take up a lot of space in mobile view. Is there anyway to make them smaller or to line the up horizontally how they are on the desktop view.

 

Thank you SO much in advance!

Hi. I think I answered your email. If the problem is solved, can you share code here for other members?

16 hours ago, Tommy1 said:

I tried adding this and it made the image size smaller for phones and made it look worse. It didn't change the display for tablets. I have custom CSS on the specific page, would that make a difference? Any other suggestions? Thanks! 

change this

Quote

@media screen and (max-width:640px)

to this

Quote

@media screen and (max-width:900px) and (min-width:641px)

Hey there, I've tried out all the CSS above for my site, and none of it has solved the issue. The images in the Pricing section of my website (on the home page) look fine when it is mobile view or full screen, but any other size (e.g. when I'm editing it on squarespace) and the text goes outside the image block. Would really appreciate any help with this!

Thanks so much in advance!

My site is https://bamboo-lime-face.squarespace.com/

5 minutes ago, hlzcp said:

Hey there, I've tried out all the CSS above for my site, and none of it has solved the issue. The images in the Pricing section of my website (on the home page) look fine when it is mobile view or full screen, but any other size (e.g. when I'm editing it on squarespace) and the text goes outside the image block. Would really appreciate any help with this!

Thanks so much in advance!

My site is https://bamboo-lime-face.squarespace.com/

I see fine here. Can you take a screenshot?

@tuanphan thanks a lot - here we go: