Read More link not working on all devices

  • tracy0313

    (@tracy0313)


    8 years ago

    The Read more link does not work in portrait mode on my iPad Air or Samsung S2 (both approximately 10 inch tablets). I’ve inspected the code, and the sidebar is running up into the main content – only in this situation – making the link unusable. It happens in Safari and Chrome. Runs great on everything else.

    I’m using the blog display style which has a main column and a left sidebar.

Viewing 6 replies - 1 through 6 (of 6 total)
  • CrouchingBruin

    (@crouchingbruin)

    You have a left sidebar? My Basic Blog Layout has a sidebar on the right. Can you please post a link to your site?

    Thread Starter tracy0313

    (@tracy0313)

    Wow, sometimes I’m a little slow. It is a right sidebar – I don’t know why I wrote left. Sorry. But does your’s work everywhere?
    Anyway, here’s the link if anyone can help: https://achallengetolove.com Thanks

    • This reply was modified 8 years ago by tracy0313.
    CrouchingBruin

    (@crouchingbruin)

    Wow, that’s weird. Yes, you are correct, the sidebar is overlaying the main content area, but I can’t figure out why. It’s not happening like that on my test site. I can recreate the problem on your site using my desktop browser using Chrome if I make the width narrow to where the sidebar jumps underneath (992px), but before where the excerpt text jumps under the featured image (768px). I’ll look at it some more when I get a chance.

    Thread Starter tracy0313

    (@tracy0313)

    It is weird isn’t it. And it’s just that size with the sidebar underneath. And it’s not the content of the sidebar – I’ve switched the order around and it still happens. Have you tried yours at that size?

    • This reply was modified 8 years ago by tracy0313.
    CrouchingBruin

    (@crouchingbruin)

    OK, I figured out why it works on my test site but not yours. On my site, I have so many entries that the pagination control gets displayed after the excerpts, and it has a clear: both; property attached to it. So I think the best way to fix your problem is to add a CSS rule that does a clear: both; for the sidebar when the width goes under 992px.

    Go to Appearance → Customize → Design & Layout → Custom CSS and copy & paste this rule:

    
@media (max-width: 992px) {
   #secondary {
      clear: both;
   }
}
    • This reply was modified 8 years ago by CrouchingBruin. Reason: Fixed formatting
    Thread Starter tracy0313

    (@tracy0313)

    Perfect! Thank you. I never would have thought of that but it makes sense and it works.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Read More link not working on all devices’ is closed to new replies.