Header image cropped on mobile in portrait view

Site URL: http://www.extremeelectronics.net/blog-1

I created a box below the header and added a image set to Full Bleed on most of my pages.  Its a bit challenging with some images as you don't have a lot of control of how it displays.  However, I have it how I want on the pages for the post part, on a computer browser.  I noticed that on my blog page, the image on mobile does not display correctly.  It's an image that say BLOG, and on mobile, it only displays LO as it is stretched off the screen.  It is fine in landscape mode, but when in Portrait, the way everyone uses their phone, LO is what displays.  Is there anyway to adjust this?

Hoping there is a way to resize the image just on Mobile so it fits.  Would be nice if there was a resizing tool in the software, per mobile versus standard browser

Add to Page Settings > Advanced > Header

<style>
  /* resize banner mobile */
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 5vh;
}
  }
</style>

Hi there @tuanphan.
I must have tried 30-40 different code solutions that you've shared with others here. I haven't quite been able to crack my banner for mobile. 

Please can you help?

Images below. And url is: https://www.nevernotcreative.org/internships

Thanks!

On 10/23/2020 at 8:56 PM, andynnc said:

Hi there @tuanphan.
I must have tried 30-40 different code solutions that you've shared with others here. I haven't quite been able to crack my banner for mobile. 

Please can you help?

Images below. And url is: https://www.nevernotcreative.org/internships

Thanks!

Add to Home > Design > Custom CSS

/* Internships banner */
@media screen and (max-width:640px) {
body#collection-5e7ad74d4f074574bc75e374 {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    top: 0 !important;
    transform: unset !important;
}
section#new-page-79 {
    min-height: unset !important;
    height: 190px;
}
}
}

Thank you so much. Works perfectly. Really appreciate you taking the time to help! @tuanphan

Hey @tuanphanI'm having the same issue do you think you can help me?

Website link - www.varunpuskur.com/shop

Thank you! 

On 5/19/2021 at 4:39 PM, VarunP said:

Hey @tuanphanI'm having the same issue do you think you can help me?

Website link - www.varunpuskur.com/shop

Thank you! 

I remember I answered this question, via forum or email???

Add to Design > Custom CSS

/* resize shop banner */
@media screen and (max-width:767px) {
body#collection-6013c66755f7ed4faa5ceedd article section:first-child {
    min-height: unset !important;
}
}

Thank you so much @tuanphan do you have any code for the image to start under the header? 

On 5/30/2021 at 12:36 PM, VarunP said:

Thank you so much @tuanphan do you have any code for the image to start under the header? 

You mean image under graphic digital prints? 

I mean something like this... The image is starting under the header and the header has a solid color to it. Thank you @tuanphan! 

As you can see below. The homepage image is starting under the logo and header. 

On 6/4/2021 at 12:40 PM, VarunP said:

I mean something like this... The image is starting under the header and the header has a solid color to it. Thank you @tuanphan! 

 

As you can see below. The homepage image is starting under the logo and header. 

ah okay. You want this on mobile only or all devices? If mobile, add this to Design > Custom CSS

/* Shop page header */
@media screen and (max-width:767px) {
body.collection-type-products.view-list header#header {
    position: relative;
    background-color: grey !important;
}
}