[Resolved] Move Right Sidebar Below Content on Tablet

Home Forums Support [Resolved] Move Right Sidebar Below Content on Tablet

Home Forums Support Move Right Sidebar Below Content on Tablet

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by Maarten.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1483030
    Maarten

    Dear Developers,

    Would it be possible just like on mobile view to have the sidebar widget (HTML/Text/Image/Video etc) move below the content on tablet view.

    I did use some CSS but it did not really have any good effect, most of the time the whole sidebar was gone or it was even more narrow.

    The plugin I use to have it fixed on desktop is:
    https://wordpress.org/plugins/q2w3-fixed-widget/

    (You can easy add the code (footer-widgets) to make it unfixed on mobile/tablet and please do otherwise it will mess up your design, always check using Chrome inspection for Mobile)

    The view in WP Customizer…

    I have no real idea how it really looks on a tablet as I do not own an iPad. But if the customizer is a view that is very close to the real view and layout than that is good to know.

    The problem is, if you e.g. add some intro text (no headline) and than some bullet points (list items) to tell the reader why the offer is of great value and than have a CTA link or button, it can look good on Desktop and even on Mobile (moves below content) but on tablet is looks really unprofessional that is _IF_ the view in customizer is correct.

    It get’s really narrow there and a long sidebar and I do not think that design will help with getting conversions.

    Finally I want to thank Tom and his team for making GeneratePress 3.0 W3C 100% error FREE!, for CSS and also for HTML! Even the biggest competitor cannot do that and I see inline CSS having things like background-color:px; <– No value, of course you get a error. I send this competitor a email about it 6 months back with no effect I guess. I will not name this Theme, but I now realize how great the coding skills by Tom and his team are and why everyone should buy the Premium version every year.

    Also on my Chrome Lighthouse test even without Autoptimizer active it get’s 100% on all scores for Desktop and Mobile! That is so fast, love it. But back to sidebar…

    It would be even more great to have sidebars (left and/or right) pop below content be it homepage content, blog pages or any other type of page or post as this would be of great benefit.

    Also, I saw a video from Google about Caffeine telling us (not) to hide any mobile content that IS on your main website as it will not index that content. So do not hide content on mobile or tablet because you think it does not look correct as this will have problems with your rankings in Google.

    Have the same content on your Desktop version in your mobile and Tablet version (Hamburger Icon does not matter at all)

    That is why I hope to see an option in Premium to put sidebar content below posts/pages and in the meantime if possible some CSS or PHP code for that so I can put it in my functions or style.css file.

    Thanks again for making GP 3.0! THE BEST ๐Ÿ™‚

    #1483628
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Glad you’re enjoying 3.0! Love hearing about performance improvements ๐Ÿ™‚

    This should be quite easy with some CSS, try this:

    @media (max-width: 1000px) {
        .site-content {
            flex-direction: column;
        }
    
        .site-content .content-area,
        .site-content .sidebar {
            width: 100%;
        }
    }
    #1485670
    Maarten

    Thanks so much for this Tom.

    #1488366
    Maarten

    Hi, should I open en new topic for this or remove this post above as it is not really related to the topic.

    Thanks for the code because it works very good! : )

    Regards.

    #1489205
    Tom
    Lead Developer
    Lead Developer

    I took a look at the video but I’m not really sure which part you’re referring to. The plugins you’ve listed for conditional widgets are great – Content Aware Sidebars is another one.

    As for the image with no space + rounded – this is definitely achievable. Feel free to open a new topic and we’ll help with that.

    In 3.0, we’ve used a typography calculator for our text. We’re not using the golden ratio, but we’re using the minor third scale. Of course, you can adjust your sizes to whatever scale you’d like.

    #1492601
    Maarten

    Thanks Tom great to know!

    I will make a new topic and will remove the post above as it is not really relevant to this topic.

    Have a good weekend,
    Regards.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.