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

Photo Resizing on Mobile (for blog)


Jacob33
Go to solution Solved by tuanphan,

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 1

In Custom CSS, remove this code

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover
}

if you want to change height on desktop only, remove it & use this code

@media screen and (min-width:992px) {
.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative;
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover;
}
}

 

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

-- I'm seriously sick. Off some time.

Link to post
  • 0

Hi Tuan

Thanks so much for your wonderful response as we have now fixed the mobile issue with your suggestion.  The only issue now is that I have uploaded the second (replacement) code as you suggested but cannot change the height on the desktop images (example attached).

I tried changing the 500px (both) in the code you provided to 150px, 250px etc but it did not seem to adjust the height of the picture.

Would you be so kind as to advise where I am going wrong??  I have also attached a picture of the code as entered on square space.

Warm regards,

Jacob 

 

Large Banner Pic.JPG

Code as entered on website.JPG

Edited by Jacob33
Link to post
  • 0
On 9/25/2020 at 2:47 PM, tuanphan said:

In Custom CSS, remove this code


.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover
}

if you want to change height on desktop only, remove it & use this code


@media screen and (min-width:992px) {
.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster {
    height: 500px;
    position: relative;
}

.collection-5d509c534f246400015f6e5c .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img,.collection-5e8fcfdd9183d768a0f7867a .sqs-block.image-block.sqs-block-image.sqs-text-ready figure.design-layout-poster img {
    height: 500px !important;
    object-fit: cover;
}
}

 

 

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