- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hi there. Do you have any spacers in the header area? Try adding one and enlarging it.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
TBH, no. I'll give it a look, but I'm not sure where I'd start.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
https://www.w3schools.com/ Is a good place to start. You can probably also search some threads on here.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- « Previous
- Next »