I'd like to have the portfolio hero header image not expand off the viewing space for a mobile device. I do want to keep the expanded visual, as is, for a desktop look. Is this possible?
Just to reiterate, only on mobile devices I'd like the hero header image to just expend the width of the mobile device at the top. It still seems to be expanding off the viewing area
This is what I put in the CSS code:
@media only screen and (max-width: 767px) {
div#hero.has-image {
display: none;
}
}
Please see attached result on the iphone as reference.
Sorry if there is a misunderstanding, the header mobile image is to just expend the width of the mobile device at the top, not delete it and not expand outside of the viewing area.
I see what you are saying here in the article. In that case, is there a way to have the current content, start below the logo? I can do without the header image in this case for the mobile devices.
I'd like to have the portfolio hero header image not expand off the viewing space for a mobile device. I do want to keep the expanded visual, as is, for a desktop look. Is this possible?
Hi Steve,
try hiding the hero section in a media query for mobile
@media only screen and (max-width: 767px) {
div#hero.has-image {
display: none;
}
}
in customizer -> additional CSS
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
This did not work.
Just to reiterate, only on mobile devices I'd like the hero header image to just expend the width of the mobile device at the top. It still seems to be expanding off the viewing area
This is what I put in the CSS code:
@media only screen and (max-width: 767px) {
div#hero.has-image {
display: none; }
}
Please see attached result on the iphone as reference.
Right you need an extra css, so replace the prev css with this one
@media only screen and (max-width: 767px) {
div#hero.has-image {
display: none;
}
#hero-bg-wrapper {
display: none;
}
}
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Hi, the hero header image has disappeared?
Sorry if there is a misunderstanding, the header mobile image is to just expend the width of the mobile device at the top, not delete it and not expand outside of the viewing area.
please see attached
Hi Steve,
Ok got it. However this is a matter of displaying a fullscreen image in the current viewport.
The following article visually explains the cropping
My fullscreen parallax image is not responsive and does not scale well
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
I see what you are saying here in the article. In that case, is there a way to have the current content, start below the logo? I can do without the header image in this case for the mobile devices.
Right, so then you hide the hero image / section on mobile as I mentioned and then add a margin top on mobile
@media only screen and (max-width: 767px) {
#main-page-content.project-page {
margin-top: 100px;
}
}
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
It seems the ipad is still showing the hero header image? The iphone is working fine. Please see attached.
Just to be clear, I'm using an IPad Pro 12.9" model
Steve, all you need to do is to adjust the value for max width
max-width: 767px
to include other devices such as your iPad
You can use 1024px for example instead of 767px
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Perfect! Many thanks!