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

How to resize image height just in mobile


BennyCC

Question

Site URL: http://www.okayokayla.com

I am trying to resize the image on the first page of my site so the height fits in the mobile browser. I have tried different codes, but nothing has worked to change the height (medium size fits perfect in testing) See examples:

 

Desktop View is perfect:

image.thumb.png.0c3166a3b1ab0d6a8d2b43d8d6d1723d.png

 

Mobile View Height needs to shrink to fit:

image.thumb.png.d4b80a3f0faf7b93ca3bc06422859c76.png

Link to comment

7 answers to this question

Recommended Posts

  • 0

Try:

section[data-section-id="60ac2acc4bc21d6a986068b1"]{
min-height: clamp(0px, 56.25vw, 100vh) !important;
}

or

section[data-section-id="60ac2acc4bc21d6a986068b1"] {
.page-section {
min-height: clamp(0px, 56.25vw, 100vh) !important;
}
}

 

Link to comment
  • 0
On 7/24/2021 at 2:15 AM, BennyCC said:

Sorry nothing is changing when input

Add to Design > Custom CSS > Then save & reload the site

/* mobile resize image */
@media screen and (max-width:767px) {
    [data-section-id="60ac2acc4bc21d6a986068b1"] {
        min-height: unset !important;
        height: 50vh;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/26/2021 at 11:50 PM, BennyCC said:

@tuanphan This worked. Thank you so much!

Need help on these?

(Checked July 28)

Site URL – https://www.okayokayla.com/

1. (Mobile – Homepage) Button is skewed to the right.

https://www.okayokayla.com/

okayokayla.com-01-min.png

2. (Mobile – Contact) Remove scroll bar?

https://www.okayokayla.com/contact

okayokayla.com-02-min.png

3. (Tablet – Services) Increase text width?

https://www.okayokayla.com/services

okayokayla.com-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...