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

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 post
  • Replies 34
  • 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

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?

Link to post

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

 

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

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

 

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

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