Reformatting images for mobile version only

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,

Hi,

Image on this page https://giraffe-fife-xnsh.squarespace.com/work

or on this page https://giraffe-fife-xnsh.squarespace.com/work/tara-mata

?

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!

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>

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!

Spoke a bit too soon....

That code has however meant that when going on the work homepage (in mobile only) it cuts off several of the first projects. This screenshot is as high up as i can scroll.

Any idea why that might be?

Use new code

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