Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Desktop Display = Good ; Mobile Display = Grrr

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #187743
    jamiedadof3
    Participant

    CSS novice here. So I’m consulting on a site that is using WordPress. It’s a responsive site, and the desktop layout is just how I want it, but the ad and logo on mobile displays are making me tear out my hair. There are no settings to fix it in WordPress admin that I can see, just a section called “Custom CSS” under the Theme Panel and a subsection for “Responsive CSS” for different device sizes. I’m wondering if anybody can help me with some custom CSS into the Responsive CSS field for mobile displays to make them behave the way I want?

    The site is http://www.theorbproject.org.

    Currently on mobile views the logo “floats” above to the top of the screen and is a bit smaller than I’d like. And the ad (the arrow and submit button in the header) is larger than I’d like. What CSS code will allow me to stop the logo from floating out of the yellow section and appear larger, and resize the ad to about 80% of its current width?

    Thanks in advance for the help!

    #187919
    Billy_Purvis
    Participant

    Are you updating plugins at the moment? There’s a database error on that link – Once I can see it I might be able to help you. :)

    #187954
    jamiedadof3
    Participant

    Thanks Billy. Server problem but should be resolved now. Any input would be greatly appreciated. I’ve run the site on a few mobile emulators and the logo doesn’t “float” there like it does when I view it on actual mobile devices (an iPhone 5 and a Galaxy S4).

    #187964
    Billy_Purvis
    Participant

    Hey,

    I’d probably recommend positioning the ‘ORB’ logo bit center on mobile devices – it’s something I’d do rather than trying to float left?

    So as it is, add some padding top to the .mobile-logo-wrap img, 50px ish and you can enlarge the width of the logo to near 230px.

    .mobile-logo-wrap img { width: 230px; padding-top: 50px; }

    I can’t see the arrow you’re referring too though.

    #188014
    jamiedadof3
    Participant

    Thanks Billy! This was very helpful. I implemented that change to the mobile CSS code.

    When I view the page on my mobiles (a Galaxy S4 and an iPhone 5) now the logo starts out right where I’d like it… centered in the yellow at the top of the page, above the banner. But when I scroll down the screen, the logo starts to “drag” down the screen (always staying on the top). How can I get it to just stay fixed at the top of the screen without dragging down?

    One other question: Why when I view the site on mobile emulators (like on MobileTest.me) does the logo appear lower on the screen than it does on the actual device? Is this just a function of the emulator not working quite like the actual device? I’ve tried it on emulators for a Galaxy S4 and S5 and an iPhone 5 and 6, and on the emulators for each the logo appears overlapping the banner on the screen (but on the real devices, at least on a Galaxy S4 and an iPhone S5) the logo appears higher on the screen? The “dragging” problem that occurs when I scroll down the screen is also consistent on each of the emulated devices.

    Thanks,
    Jamie

    #188041
    Billy_Purvis
    Participant

    Take the position: fixed; off .td-menu-placeholder, set a height on .row-fluid (50px;) and then you could just style the logo again, using position relative.

    I’ve noticed your code is really nested and confusing, you might want to clean it up a lot, you’d probably find you’d fix the error there. After you’ve done that, the logo shouldn’t follow the page down.

    #188094
    jamiedadof3
    Participant

    Thanks for all the help Billy! Like I said, I’m great with HTML but still learning CSS. I tried adding some of the things you said but only ended up shrinking the logo and the header row.

    Under custom CSS for phone displays of 0 – 767 px I now have:

    .mobile-logo-wrap img { width: 230px; padding-top: 50px; }
    .td-menu-placeholder {fixed: off; }

    The logo still follows the page down. When I add in:

    .row-fluid {height: 50px; }

    … the page shrinks down without displaying any articles (sorry if I’m not explaining that correctly). And when I add:

    position: relative;

    … to the .mobile-logo-wrap img part, the logo shrinks down really small (and still follows the page down).

    How should I revise the custom CSS for phone display to implement the fixes you suggested? Sorry for asking you to spell things out, but like I said, definite newbie here in this stuff. No clue how to clean up all the CSS using this WordPress tool, but I’ll take it one step at a time with this stuff. ;)

    Thanks!

    #188114
    Billy_Purvis
    Participant

    No worries – CSS is great once you’ve had a tonne of errors and you’ve learnt how to overcome them.

    WordPress’ editor is a bit s***, I always use Sublime to edit my CSS – depends how you have WordPress set up.

    Fixes:
    .td-menu-placeholder { position: relative; }
    .mobile-logo-wrap img { width: 280px; padding: 85px 0px; }

    It’s because the image is nested within a parent element that has a position: fixed; set on it causing it to ‘follow’ the screen. The above should solve your issue.

    #188198
    jamiedadof3
    Participant

    Worked like a charm! Thanks!!!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.