Create different layout for mobile

deremedia

I'm using a transparent header for my website but needed a normal header with background for my blog posts so I created a layout for that. In desktop everything works fine but the layout is not working in mobile.

This is how the homepage / blog post looks with the "transparent" option selected in theme options > responsive > header > mobile options: https://prnt.sc/kj6pr3

This is how they look with the option deselected: https://prnt.sc/kj6pwm

This is how I want them to look: https://prnt.sc/kj6q2v (just as I accomplished on desktop)

I tried with CSS but couldn't find the right ID.

Can you help me? This is the website: deremedia.com

Pablo

Hi,

Please use this Custom CSS code

.single-post #Content{
	padding-top:75px !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

deremedia

Thanks but when seen in iPad I'll have the header I want with too much space above, plus I lose the header shadow I set with css

Pablo

I tested it on iPad and it's working now.

Isn't it?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

deremedia

Yes, it it. Thanks

What can I do about the shadow in mobile?

Pablo

I can't recreate it ideally, but I think this is close enough

#Top_bar{
	padding-bottom:5px;
	box-shadow:0px 0px 0px 0.7px rgba(0,0,0,0.3);
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

deremedia

Thanks!