- 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
You may want to try an image that is center focused.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
I ended up removing the header from the page and just adding the image back in as a separate element. Seems to get the job done.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
The amount of horizontal space shown with an image is determined by the the height of the image, so you'll likely need to reduce the height of the header area on mobile so more of the image is shown horizontally.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hi,
I have this same issue, I have changed the theme and it works fine then but I want to use the Venue - Blog Theme as it looks good. My site is www.thephotoboothtoronto.com, looks fine on desktop and everything looks fine on mobile except the header. The header looks fine in landscape but in portrait it gets cut off by this grey column on the right hand side.
Is there a way to fix this?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hello! So far, I haven't been able to reproduce it here. Is there a specific page on the site that happens on?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
I don't see a header image on that site, @ranjani4ever; did you change it to be a solid color?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hi Adam, yes, I had a immediate requirement to give a presentable site and hence changed it. Should I revert it back for troubleshooting?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
You can do that if you want, although I suspect that the solution will be editing the image some so the proportions are a little different.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Add spacers to the image. Took me months to figure this out!!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
That worked!!!!!! Can't thank you enough!!!!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hi there,
Could you be more specific about exactly where the spacers should be added?
Many thanks,
Sarah
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
OMG! Finally a simple answer to the solution! Thank you sooo much! This was a completely irritaing problem. I added one spacer to the top of my background photo and it has instantly solved the cropping issue.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
How do you reduce the size of the header on mobile only?
Please reply to kristen@thelighthouseministries.org
Thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Can you post a link to your live site @kristenlighthou? That will help other members get an idea of what you are looking for. Thanks!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
I have the same question, regarding how to change the header only on mobile so that it looks like its supposed to. The desktop looks great, but the movile version cuts off the image both horizontally and vetically. I found adjusting the padding will fix the header issue, but then it will squeeze all the text on the page. I've looked through the CSS already and there's not much else I can change. Is there anything I can add? I have edited alot of CSS with the theme I have so changing the theme is no option. Thanks!
https://www.kapenakai.com/specialty-retailers.html
mikey@kapenakai.com
Edit: Adding spacer helped the mobile version tremendously. But it's still not 100%. The Tablet version still needs help.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Hey,
I'm having kind of the same problem. My client wants his bussiness card as a headerbackground. It looks and works great on desktop design. But when I go to mobile design the header image is cut off. Any advice?
All things work great on desktop and mobile design.
Theme I'm using: desk - event (I rather not switch themes) the website is ready I only have this issue described above.
Thnx in advance!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report