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

Lange - Resize Images for Mobile

Question

Site URL: http://www.billydupee.co.uk

I have images for my projects set to full width on my dekstop home page as you can see in the screen shot attached. However, when I view the page on mobile the images are cropped. I want to use code to either position the images how I want them to appear on mobile or to set the images to automatically scale down proportionally on mobile so more of the image can be seen. You can see how the crop on mobile currently means the point of interest of the image is out of frame.

Thanks

Screenshot 2020-07-20 at 17.29.08.png

IMG_2212.PNG

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

What I mostly do for clients is to design a mobile version of the landing page (hidden on desktop and vice-versa)  with a little piece of CSS

Version 7.0 or 7.1?


that will make you more flexible
 

Some examples attached

881244973_Bildschirmfoto2020-07-23um10_50_09.thumb.png.9d61f59a76c2a5607e92513ffa5e430d.png1937817338_Bildschirmfoto2020-07-23um10_50_17.png.9cf37d29efb86ad922f14853e48323ce.png81092590_Bildschirmfoto2020-07-23um10_49_53.thumb.png.1df432f96baad7297fd5d4cf39abd6b4.png1500029971_Bildschirmfoto2020-07-23um10_49_44.thumb.png.4aec39d53737980ac96d78dcb46192c6.png837785592_Bildschirmfoto2020-07-23um10_53_37.thumb.png.2bdb6932b8fe5864fb56e9bef60e381d.png720472241_Bildschirmfoto2020-07-23um10_53_46.thumb.png.5a9978e9ce742d27ecee09549bdf74f3.png

Share this post


Link to post
  • 0

Thanks. I'm currently using 7.0. I cannot edit the mobile version of the site in anyway. When I view the site in the mobile preview through Squarespace and click on edit, it will automatically change to the desktop site. Giving no customisation of the look of the mobile site. Is there not code that allows the proportional cropping of images for mobile or can you adjust the position within the frame of the image using code?

Share this post


Link to post
  • 0

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
#index-section-studio-171 figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
#index-section-studio-171 article.index-item.has-item-image {
    height: 35vh !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

Thanks so much tuanphan. That has worked well for the first project on my site. How can I change the code to do the same for all projects on my page for mobile only?

Thanks again..

Share this post


Link to post
  • 0

Hi Tuanphan, are you answet the question above to make that code affect all the images for projects on my front page?

Thanks

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