Jump to content

Image Blocks on Mobile

Recommended Posts

@tuanphan its also an issue for the mobile view for these seasonal pictures, when I do caption overlay on hover

 

image.png.c3a7af87cf2d7d30b53f019594fa6a21.png

 

is there a way of making it so that on mobile view, you only see one picture at a time (with the text the appropriate size, within the image) and not 4 images with giant text?

Thank you!!

Link to comment
  • Replies 34
  • Created
  • Last Reply
On 10/5/2020 at 10:06 PM, hlzcp said:

@tuanphan its also an issue for the mobile view for these seasonal pictures, when I do caption overlay on hove

is there a way of making it so that on mobile view, you only see one picture at a time (with the text the appropriate size, within the image) and not 4 images with giant text?

Thank you!!

One image/row or reduce text size?

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

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !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
  • 1 month later...

Hi,

I am having similar issues as in this thread: The posters on one of my web-pages are showing as expected on PC & Mobile devices but for middling screens like tablets, the text is hanging over the top of the poster.

image.thumb.png.847607addadc0a94d7f1a55c3fa13432.png

I have been trying to wrap the text or keep it relative to the image but cannot quite find the right CSS.

The link for this particular page is Get Started Programmes — Nufit (nufitcoach.com) 

Any help is greatly appreciated - thank you.

 

Link to comment
On 12/2/2020 at 5:27 PM, Nuria_Riu said:

Hi,

I am having similar issues as in this thread: The posters on one of my web-pages are showing as expected on PC & Mobile devices but for middling screens like tablets, the text is hanging over the top of the poster.

image.thumb.png.847607addadc0a94d7f1a55c3fa13432.png

I have been trying to wrap the text or keep it relative to the image but cannot quite find the right CSS.

The link for this particular page is Get Started Programmes — Nufit (nufitcoach.com) 

Any help is greatly appreciated - thank you.

 

Hi. I think you can use 4 Text Blocks, then share url again, I will give the code to make background for them.

This way you won't have problems on devices, the text will always be inside the background. Furthermore, with this code, you can apply it to future cases.

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
On 12/4/2020 at 10:08 PM, Nuria_Riu said:

Hi Tuanphan,

Thanks for the reply - I have changed the columns to text blocks now: Get Started Programmes — Nufit (nufitcoach.com)

The explanation makes sense and I can see straight away by changing the browser size that the text resizes really well now. 

Let me know the code to get some backgrounds on the text blocks and I can update it.

Thanks!

Add to Home > Design > Custom CSS

div#page-section-5fc6ad1eeaf37e3b6488b8c5>.row:nth-child(2) .html-block {
    background: blue;
    margin: 10px;
}

 

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

I am also having this issue on a website I've designed - located near bottom of homepage - using the image block, poster layout. It seems to have sizing issues between 641px - 1125px wide. I've attempted to fix this with the code supplied in previous posts, but had no luck. I know a bit of css, but not an expert by any means. Any help would be greatly appreciated to target stack view of these image blocks starting at the 1125px wide until mobile settings kick in.

Website: https://wm-opt.squarespace.com/
PW: 2020-WMO

Screen Shot 2020-12-17 at 4.58.56 PM.png

Link to comment
On 12/18/2020 at 5:03 AM, BoulevardNorth said:

I am also having this issue on a website I've designed - located near bottom of homepage - using the image block, poster layout. It seems to have sizing issues between 641px - 1125px wide. I've attempted to fix this with the code supplied in previous posts, but had no luck. I know a bit of css, but not an expert by any means. Any help would be greatly appreciated to target stack view of these image blocks starting at the 1125px wide until mobile settings kick in.

Website: https://wm-opt.squarespace.com/
PW: 2020-WMO

Screen Shot 2020-12-17 at 4.58.56 PM.png

You can add 3 text blocks, then I will give the code to add background for them. You won't have above problem.

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

Archived

This topic is now archived and is closed to further replies.


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