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

Header image cropped on mobile in portrait view


Recommended Posts

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?

Link to comment

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>

 

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

Link to comment
  • 3 weeks later...
  • Susana_SQSP changed the title to Header image cropped on mobile in portrait view
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;
}
}
}

 

Edited by tuanphan

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

Link to comment
  • 6 months later...
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! 

IMG20210519150820.jpg

Screenshot_2021-05-19-15-08-35-89.jpg

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;
}
}

 

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

Link to comment
  • 2 weeks later...
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? 

Screenshot_2021-05-30-08-56-23-18.jpg

You mean image under graphic digital prints? 

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

Link to comment

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. Screenshot_2021-06-04-11-07-27-71.thumb.jpg.a4131f618bd311bee49ccf203a1f42b7.jpg

Link to comment
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. Screenshot_2021-06-04-11-07-27-71.thumb.jpg.a4131f618bd311bee49ccf203a1f42b7.jpg

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;
}
}

image.thumb.png.c3e712f3d3eec858c25c2e1eb0571831.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

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