Header image cut off on mobile devices

[kspkspksp]

Hi,

I created a new portfolio demo and can't seem to adjust the css to make the header image on the home page mobile responsive. Looks fine on the desktop, but on mobile devices the right half gets cut off. The rest of the images look fine.

This is the stock image that came with the weebly theme.

How can I adjust the css so the image on the header will adjust in size accordingly for mobile devices??

There is no main.css, only a main.less under Styles.

[DanPeyton]

Hi Bernadette, I;m having a similar issue and having tried a few options can't get my header to align on mobile. Site is www.motion-sickness.com.au

I'm wanting the ladies face on the left to show on mobile. 

Thanks for your help, 

Dan.

[Bernadette3]

Hi Dan. This one is a bit tricky, and a perfect example of how the image resizes. If you think of the image itself, we know that the focal point is the woman on the left. However, the "screen" does not know the subject matter is on the left and will instead use the true middle of the image, cutting of the edges as needed to fit the screen. Can you try adding a spacer to the left of the text? 

[catherinevanhul]

Hi Bernadette, 

I have a similar problem on my website: I have a page with header and have a picture in there as background. It looks fine on desktop, but a part from the top and the bottom of the picture is cut off on mobile. Can you please advise me what to do? (in very simple explanation ).

This is the page I'm taking about:

https://www.jobdesign.be/over-ons.html

Thanks in advance,

Catherine

[Bernadette3]

Hi there. Do you have any spacers in the header area? Try adding one and enlarging it.

[CJGotcher]

Running into similar on my site: www.wayfarerstrength.com

I've tried using spacers and changing the image size from 2000X1000 to 2000X500 and 2000X800, and it only distorted the picture more. Specifically, the spacers enlarged it within the narrow frame, cutting off more of the image, and the resizing moved the image body to the bottom of the frame so it didn't look correct on desktop. Any ideas? 

[Bernadette3]

Can you try clicking on the background image, and then resizing the blue circle in the middle bottom of the section. You should be able to drag it to a larger size. 

[CJGotcher]

Shrinking the header to its smallest size and blowing it up to its maximum doesn't change its appearance on mobile, though it does on desktop. 

[CJGotcher]

I may actually have an easier question. I've been playing around with settings and sizes and found something that works around the problem, but now the menu bar is the issue. 

In Desktop, the menu bar is transparent, and it's perfect. In mobile, the menu bar is black and cuts the off the top of the logo and icon. I can't seem to find any setting that controls the menu bar- is there a way to make the menu bar transparent like in the Desktop view? I'm using the "Brooke Anderson - Slick" Theme

[Bernadette3]

Ah, I hadn't thought of that. I think it's possible with some custom html/css override. Are you familiar with that at all? 

[CJGotcher]

TBH, no. I'll give it a look, but I'm not sure where I'd start. 

[Bernadette3]

https://www.w3schools.com/ Is a good place to start. You can probably also search some threads on here. 

[jennywoolf]

Hi Adam, thanks for this solution you gave on 07-10-2018 11:06 AM! Basically worked for me, however the bottom of the image is cropped a bit compared to desktop. Tinkered with the numbers in hopes it would resolve the issue—including trying adding 

    margin-bottom: 30px !important;

underneath the margin-top line, but alas still nothing. Any advice?

Here's the website:

https://jennywoolfjewellery.weebly.com/

It's the image of the three pictures of female models next to one another toward the bottom of the home page. If it's possible to reply to my at jrw439@nyu.edu or even give me a heads up there that you've replied here, that'd be much appreciated!

[Bernadette3]

I believe it is cutting off due the ratio of the image. Images that are more square will display better on mobile. You are referring to mobile view, correct? 

[TidyToters]

Hello! I am trying to use the code you pasted to make my desktop header and my mobile header both look good on my website. It is saying the code is not working?

It says....

Invalid HTML detected. Only <script> <noscript> <meta> are allowed as root HTML tags.

Any help?

[Adam7]

With sites built using the Square Online editor, we don't currently allow certain kinds of code to be added as header codes. What kind of changes are you trying to make with your header image?