- This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by
David.
-
AuthorPosts
-
February 18, 2023 at 8:52 am #2538115
George
I have a right sidebar that displays an ad and a Table of contents. According to a previous ticket, I used this CSS to show on the top of mobile view:
@media (max-width: 768px) {
.right-sidebar .site-content {
display: flex;
flex-direction: column-reverse;
}
}Currently, it looks like this: https://giveawaylisting.com/nft-giveaways/ . Sadly it looks quite bad when the TOC & Ad show before even the Page title and Featured Image. This setup will have very high bounce rates,,
I need the sidebar to show below the title and featured image but above the main content. Can you please provide me an updated CSS that help me do that?
February 18, 2023 at 11:05 am #2538225David
StaffCustomer SupportHi there,
its not possible with CSS, as it cannot move an element ( eg a sidebar widget ) out of its parent ( e.g the sidebar ) and then insert somewhere else in a different container.
One method is to add the ToC where you want it on mobile e.g after the Entry Title.
And then we could provide some CSS to absolutely position it over the sidebar.
But thats not possible either in this case, as you have an advert in the sidebar and its position may vary….the only method is to use Javascript.
Its not a method i personally like but you can give it a go.1. Create a new Hook Element in Appearance > Elements.
2. Add this script to the hook text area:<script> function moveAfterElement(elementToMoveSelector, targetElementSelector) { const viewportWidth = window.innerWidth || document.documentElement.clientWidth; if (viewportWidth < 769) { const elementToMove = document.querySelector(elementToMoveSelector); const targetElement = document.querySelector(targetElementSelector); targetElement.parentNode.insertBefore(elementToMove, targetElement.nextSibling); } } moveAfterElement('#block-12', '.entry-header'); </script>
3. set the Hook to
wp_footer
4. set the Display Rules to suit your need.Note, the function will only fire once on initial load, and it will move the widget below the entry-header if the screen size is below 769px.
IT won’t move back if you resize the browser….February 18, 2023 at 11:31 am #2538244George
Thanks for the detailed response David, very kind of you. Considering the drawbacks I don’t think it is worth adding the JS. I’m thinking of this alternative (if possible):
1. Is there a way just to hide the ad HTML code (currently added as a widget) on mobile view?
2. Is there also a way to add a shortcode (for the TOC or anything other shortcodes) in the Gutenberg content that is only visible on mobile and hidden on desktop?February 19, 2023 at 3:24 am #2538556David
StaffCustomer SupportI think i was having a weird day yesterday… as there are other options we could explore.
For example you could create a Page Hero:
https://docs.generatepress.com/article/block-element-page-hero/
Use that to display the Title / Featured and any other post meta above the fold.
If you make it 2 columns you can include a HTML block for the adscript.Now with the rest of the site as it is, the CSS you used above will position the Sidebar between the hero and the content.
February 21, 2023 at 2:08 am #2540880George
Thanks David, excellent support as always
February 21, 2023 at 3:04 am #2540953David
StaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.