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

How to adjust picture width to make picture smaller on mobile

Question

Posted (edited)

Site URL: https://matey.app

Hi, I'm trying to figure out how to make my iPhone pictures smaller on mobile so they aren't full-width. I want them to appear smaller like the Apple website example attached. I don't want to change the padding of the underlying text, just the iPhone. Does anyone know how to do this? My site is on Squarespace 7.1.

Thanks!

IMG_9155.jpg

IMG_9156.PNG

Edited by cvanuch

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 1
Posted (edited)

Add to Home > Design > Custom CSS

/* resize image on mobile */
@media screen and (max-width:767px) {
.homepage .image-inset {
    width: 70%;
    margin: 0 auto;
}
}

 

Edited by tuanphan
update code

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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 1

New code

/* resize image on mobile */
@media screen and (max-width:767px) {
.homepage .image-inset {
    width: 70%;
    margin: 0 auto;
}
/* Exclude app icon */
div#block-yui_3_17_2_1_1595994896451_10296 .image-inset {
    width: 100% !important;
}
}

 


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

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan Looks good, is there a way to exclude adjusting the text underneath the phone screen? Also, is there a way to exclude adjusting the app icon photo?

IMG_9179.jpg

Share this post


Link to post
  • 0

@tuanphan Thanks, looks good! Is there a way to exclude poster image blocks? Poster images are currently affected, causing the image to display incorrectly like the screenshot below. Do you also know how to apply the same border-radius of 30px to poster image blocks on mobile? It looks like the corner radius goes away on the phone. 

IMG_9721.jpg

IMG_9736.jpg

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