Need help? Check out our Support site, then


Reddle theme - width adjustments not jiving with mobile devices

  1. Like others, I wanted to change the content and sidebar widths for my reddle blog. I looked through the forums and got exactly the code I needed. The blog now looks exactly as I want it to on my computer, but the adaptive nature of this template is causing my site to look terrible on mobile devices. HALP!

    The code I used to fix my widths is:

    .secondary #content {
    margin: 0 31% 0 7%;
    }

    footer .permalink,
    .image-attachment #content footer .permalink {
    margin-left: 58px;
    }

    #main .widget-area {
    width: 20% !important;
    }

    Looks great on my computer, but on my iPad for instance, the content is overlapping and the sidebar (which is supposed to go to the footer on mobile devices) is all jacked up.

    Does anyone know how to tweak the code so that my blog looks like it does on my pc but doesn't go nuts when trying to adapt to other devices?

    Note: I of course do not have this problem if I revert back to the original CSS. But I don't wanna.

    blog site: http://www.beholdthedimwhit.com

    Note 2: It's a new blog with no real entries yet. Don't judge.

    -Whitney

    The blog I need help with is beholdthedimwhit.com.

  2. God bless America...I posted this twice. Ignore the other topic submission please. Ugh....

  3. Hi, I see what you mean. It looks good until it gets to the footer. I have also tagged this with "CSS" since that is your problem. It will alert those gurus. :)

  4. There is no need to tag any thread posted into the CSS Forum by those who have the custom design upgrade. The upgrade has Staff support and they automatically assist in these threads.

    Staff work through all forum threads and through all email support tickets in order of datestamps and timestamps – first posted first served, as would be expected. How long it takes to clear the threads and support tickets depends on how many Happiness Engineers are working on them at any given point in time. It also depends on how complex the issues in each thread and ticket are are.

  5. Duly noted. :)

  6. Thanks for getting the responses started. I also thought it may be helpful to mention that I have experimented with turning on and off the "Enable Mobile Theme" option to no avail. I have also looked through some other posts that seem related to mine, but either did not get a solution that worked for me, or did not understand the solution due to my limited CSS knowledge.

    Which brings me to this point: I am simple. My CSS expertise is limited to knowing where to go within my site to make the changes, and the ability to copy and paste.

    Hope that helps-you-to-help-me.

    Thanks!

  7. Hold it! If Reddle is a responsive layout theme then you need to disable the mobile theme as it's completely different theme that only for themes that aren't responsive.

    Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    Look here and see if Reddle appears or not http://theme.wordpress.com/themes/features/responsive-layout/
    If it does then go to > Appearance > Mobile and disable the mobile theme

  8. Yeah, I was hoping that would work too. But unfortunately, it doesn't seem to make a bit of difference whether or not I have that feature enabled.

    :(

    I am currently working on my MacBook, with my iPad right beside me to test the options.

    It almost seems as though something about the code I injected is simply messing with the responsive layout (whether or not I have it enabled). Either way, still looks great on a computer and looks a hot mess on everything else. I could give up and just work with the original CSS, but I really just don't care for those column widths...

  9. Let's start with the easiest fix: the messed up footer on portable devices.

    The reason the widget area looks so weird on mobile is because of one little part in your custom CSS:

    #main .widget-area {
    width: 20% !important;
    }

    !important is causing the 20% width to take precedence over any other widths applied to that same thing. So on portable devices, the widget area is only 20% of the total width!

    The fix is simple: just get rid of the !important and then the mobile styles will be able to do what they're supposed to again.

  10. @andyjbell
    Yay! and the fan in the cheap seats goes wild lol :D

  11. @dimwhit

    When you were talking about "overlapping" content you mention on your original post, what were you talking about? I'm not seeing any overlapping content (though I'm not testing on an iPad).
    After applying my fix from two posts up, is the overlapping thing still happening? If it is, can you grab a screenshot of it?

  12. Okay so, thanks first of all. The fix you gave helped my sidebar as it shows via iPad.

    The next issue is the overlapping. If you view my sight via iPad, the date bubble overlaps the post title, making it impossible to read. So basically, I just need the date bubble to move left when viewing via mobiles and it looks as though the problem may be solved. Remembering I like the date bubble where it's at on my blog when viewing on a pc.

    Did that make sense? Hopefully.

    Thanks for the help so far!!!

  13. Hi there, let's use a media query to set what happens below 900px in width, which is the point where the bubble bounces over to the right and on top of your post titles. You can adjust the -20px value as desired.

    @media screen and (max-width: 900px) {
        #content footer .permalink {
            margin-left: -20px
        }
    }
  14. It worked!!!!!

    Thanks everyone! You rock. Problemo solved!

  15. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic