Elements floating on top of each other when Resizing or checking site on mobile. Twenty Twelve

I’m using WP Twenty Twelve theme for my blog: Glory and Honor and have followed the Replace #site-title with resizable image in Twenty Twelve Post to fix my logo not displaying when visiting via my mobile. (This is my first isssue)

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.

Read More

Also, 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 is, I do need the margins because the logo displays exactly how I want it to – centered in the header – for the desktop version.

Another issue is the sign up form, search form, and shop image-button/ link I have added. They 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.

Related posts