- This topic has 7 replies, 3 voices, and was last updated 3 years, 10 months ago by
Leo.
-
AuthorPosts
-
April 18, 2017 at 10:03 am #307379
sdanbu
Is there a way to switch the page header when switching desktop and mobile using GP?
On mobile devices, my page header looks a lot different than on the desktop and I’m wondering if I can use a way to toggle different page headers for each screen width.
If not with GP, is there or some recommended plugin or child theme or special CSS to use?
Thanks
GeneratePress 1.3.46April 18, 2017 at 11:31 am #307414Tom
Lead DeveloperLead DeveloperWhich element are you wanting to switch? The background image? The content?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 18, 2017 at 12:06 pm #307423sdanbu
I was thinking both the content and the image because in mobile devices, my image doesn’t look small enough and the content font size doesn’t shrink and gets garbled as well.
April 18, 2017 at 6:49 pm #307515Tom
Lead DeveloperLead DeveloperFor the image, you would have to use CSS media queries. It’s best to use my Simple CSS plugin as it allows you to add CSS to specific pages.
Then you could do this:
@media (max-width: 768px) { .generate-content-header { background-image: url( 'MOBILE IMAGE URL' ); } }
As for the content, you would have to add two blocks of content into the content area:
<div class="hide-on-desktop"> Tablet/Mobile content in here </div> <div class="hide-on-mobile hide-on-tablet"> Desktop content in here </div>
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 4, 2017 at 12:24 pm #314011sdanbu
I am trying to change the text so it doesn’t show, but when I use the above, it disappears too early. I would like it to disappear only when it is the width of 520 rather than 1216px
Instead of using
Is there a way to use a specific px attribute rather than at 1216px
Thanks
May 4, 2017 at 1:06 pm #314051Leo
StaffCustomer SupportHi Scott,
This is the responsive break points currently used in GP:
https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744You can hide specific
div
by wrapping the code using the@media
method in the example link above and just change the px number.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 4, 2017 at 4:26 pm #314119sdanbu
May 4, 2017 at 5:01 pm #314128Leo
StaffCustomer SupportTry something like this:
<div class="hide-on-px"> Content here </div>
Then with this CSS:
@media (max-width: 520px) { .hide-on-px { display: none; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.