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

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

Share this post


Link to post

@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

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


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

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


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


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


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%


 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post


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...