Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Image Blocks on Mobile


Recommended Posts

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.

Screenshot 2019-12-04 at 3.15.11 PM.png

Screenshot 2019-12-04 at 3.17.21 PM.png

Link to post
  • Replies 29
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

@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

Posted Images

@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

image.thumb.png.5042a3e3accd84bb9326d96fe13c928a.png

Edited by tuanphan
add class

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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.

 

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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%

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 4 months later...
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!

Screen Shot 2020-04-23 at 1.06.09 PM.png

Screen Shot 2020-04-23 at 1.04.39 PM.png

Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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?

Link to post
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);
}
}

 

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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!

Link to post
  • 3 months later...

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! 

Link to post
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

@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!

Link to post
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! 

Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
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)

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 1 month later...

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/

Link to post
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...