Archived topic
Different header
11 replies · Started by Royal Rangers on August 31, 2020
Hi, is possible have two header for one content?
I mean - for desktop have fullscreen feature image and for mobile not.
Thanks. Maybe I wrong described it.
Hi there,
Tough to tell without seeing your current set up.
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Hi, I add a webpage.
Are you referring to the header element/page hero?
You can hide that entire element by adding hide-on-mobile class in the custom CSS field:
https://docs.generatepress.com/article/header-element-overview/#element-classes
Let me know if this helps :)
Hi, it works but I need something else.
For desktop as fullscrenn, for tablet and mobile like homepage.
It is possible?
Hi there,
add this CSS:
@media(max-width: 1024px) {
.single-post .page-hero {
min-height: 300px;
}
}Change the 300px to set the height you want for mobile and tablet.
It works. I add these breakpoints:
@media (max-width: 567px) {
.single-post .page-hero {
min-height: 240px;
}
}
@media (min-width: 568px) and (max-width: 768px) {
.single-post .page-hero {
min-height: 360px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.single-post .page-hero {
min-height: 480px;
}
}
@media (min-width: 1025px) and (max-width: 1279px) {
.single-post .page-hero {
min-height: 720px;
}
}
THANK YOU
You're welcome
Sorry for re-open. I have a little question. How i set this on specific page via element. I try .single-page but not work. I updated website link in first post.
Hi Jan,
You can try making a GP Hook Element containing your <style> ... </style> and set the Display rule to the specific page you want it to apply to.
Here's a demo video.
https://share.getcloudapp.com/mXuyQNGw
What basically happens here is we only applied the styling to the homepage/frontpage by placing the <style> inside the wp_head or <head> tag of the homepage/frontpage.
Yes. This is it. Thanks!
No problem.:)
