Jump to content

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
  • Replies 11
  • Views 1.6k
  • Created
  • Last Reply
  • 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;
}
}
}

 

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
  • 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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.