Elements floating on top of each other when Resizing or checking site on mobile. (6 posts)

  1. gloryandhonor
    Posted 2 years ago #

    Hi there,
    I'm using WP Twenty Twelve theme for my blog: Glory and Honor (http://blog.gloryandhonor.com)

    I was following the post: Replace #site-title with resizable image in Twenty Twelve
    #site-title with resizable image in Twenty Twelve to fix my logo not displaying when visiting via my mobile. (This is my first issue.)

    I've been struggling with having my blog layout and site-logo display properly on my iPhone and iPad. The @media CSS (from the posting I have been following) "disappears" my site-logo altogether.

    Second issue, I have been working on the CSS for the actual site-logo but noticed that when I remove the margins from the site-logo CSS, the logo does display on my mobile and the layout looks fine. The problem with this is, I do need the margins because the logo displays exactly how I want it to - centered in the header - for the desktop version.

    Third issue, the sign up form, search form, and shop image-button/ link I have added, float all over the place on the desktop site (when resizing the browser) and when visiting the site via my mobile.

    I absolutely would like to keep the site responsive.

    Just need some direction on what to do to resolve these issues.

    Hope its simple!

    Thanks in advance.

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You seem to have created some major mark-up errors in the header.php file, so you need to fix those before doing anything else:


  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

  4. gloryandhonor
    Posted 2 years ago #

    Hi WPyogi,

    Thanks for the reply.

    I'm working on fixing the errors. I believe the <hgroup> error I can leave alone bc of HTML5? And I fix the iframe with CSS.

    RE CSS errors - I fixed one with luck but am unclear on how to resolve the remaining errors and address the warnings.

    I'll be researching how to fix everything. If you have any advice or a recommend a site to reference that would be very helpful.

    Thanks again!

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Looks like you got those sorted - great! As to the other resizing issues, are you aware that twentytwelve is coded "mobile-first"? So that means that you need to use @media queries in your CSS to control how it looks on a bigger screen - look at twentytwelve's style.css file starting on about line 1250 for how those are set up. So I'm guessing you need to fix some of your existing child theme CSS to work the way you want.

  6. gloryandhonor
    Posted 2 years ago #

    Hi WPyogi,

    Thanks again. This is where I am struggling - how to figure out what DIVS/ CSS to use and with what sizing - margins/ padding/ etc to be in accord with media queries.

    I've been testing a few codes but I still cannot resolve my issue with the logo. How can I make it resize when resizing the browser and resize for mobile viewports. Same goes for my "Shop" icon which I would like to have move with the browser when it resizes.

    Is there an easy general code for this?

    Thanks in advance!

Topic Closed

This topic has been closed to new replies.

About this Topic