Archived topic
Apply this css to only desktop and align hamburger menu with the logo on mobile
6 replies · Started by Jesus Higuerey on August 31, 2018
Hello,
I have this css
.post-image-above-header .no-featured-image-padding .inside-article .featured-image {
margin-top: -115px;
box-shadow: 0 0 18px 0 rgba(205, 226, 255, 0.54);
}Which makes the featured image overlap with the page header which is what I want: PREVIEW
But the thing is that on mobile it looks horrible take a look: http://prntscr.com/kp6tg1
Lastly, on that last image (http://prntscr.com/kp6tg1) you can see that the post title and the hamburger menu button are so close of each other, Is it possible to align the logo and the header? Doesn't really matter if the logo becomes a bit smaller.
Hi there,
Place your CSS inside a media query like this:
@media (min-width: 768px) {
/* Your CSS in here */
}For the second issue, have you tried playing with our Mobile Header option?: https://docs.generatepress.com/article/mobile-header/
Assuming you're using our Elements module, you can use the "Offset Site Header Height" option in the Site Header tab to add the height of your header (or mobile header) on mobile. This will prevent your content from getting too close.
Hope this helps!
Hello Tom,
The second issue is now resolved. Moving towards the first one, I did put the code inside the code you provided. I put the margin-top to 0 just to see how it would look on mobile but it didn't even flinch haha
Hi there,
the code should look like this:
@media (min-width: 768px) {
.post-image-above-header .no-featured-image-padding .inside-article .featured-image {
margin-top: -115px;
box-shadow: 0 0 18px 0 rgba(205, 226, 255, 0.54);
}
}Remove any of the other code related to this, if it still insn't working the try clearing any caches. And if still no joy then move that code to the top of your CSS.
Hey There,
The code above affects the desktop version, which is not what I want. I deleted the previous code but even if I touch it it moves the desktop version which is not what I want, I just want to lower the image on a phone/tablet
It is now solved, I added padding to the Page Header when creating the element.
The code above should have made it so the negative margin only applied on desktop. This would prevent any negative margin on mobile at all (unless your existing negative margin code was still added).
Glad you found a workaround :)
