Jump to content

Reformatting images for mobile version only

Recommended Posts

Site URL: https://giraffe-fife-xnsh.squarespace.com/work

Hi there,

On the 'work' tab of my page every project has an opening image to it. On the desktop version they are indented but basically full width. When changed to mobile version the image becomes cropped and portrait.

Does anyone have advice on css to get the image to appear full width on mobile?

Suggested css hasn't applied to my site before so would love some expert assistance!

Cheers,

 

Link to comment
  • Replies 6
  • Views 842
  • Created
  • Last Reply

Hi Tuanphan.

It is the first image on https://giraffe-fife-xnsh.squarespace.com/work/tara-mata

Each page within the work portfolio has the same opening image format so i was wondering if there was css to apply generically so that all the images resize to the normal landscape for mobile, or whether code has to be applied for each individual section block?

Thanks again for your help i really appreciate it!

 

 

Link to comment
16 hours ago, Billy1996 said:

Hi Tuanphan.

It is the first image on https://giraffe-fife-xnsh.squarespace.com/work/tara-mata

Each page within the work portfolio has the same opening image format so i was wondering if there was css to apply generically so that all the images resize to the normal landscape for mobile, or whether code has to be applied for each individual section block?

Thanks again for your help i really appreciate it!

 

 

Add this code to Work Page Header

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: 10vh !important;
    height: 45vh;
}
  }
</style>

 

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

Amazing you are the best Tuanphan!

I have also noticed that the images at the bottom of the tara mata page have the same issue? is there a way of applying css so that every image that goes portrait in mobile mode stays landscape?

Thanks again for your help!

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.