WordPress.org

Ready to get started?Download WordPress

Forums

Making my website compatible with Ipads/Mobile's (6 posts)

  1. danny_getextra
    Member
    Posted 1 year ago #

    http://www.lburner.co.uk/wp/

    I've been developing this website, It's my first site on wordpress. I learnt how to create child theme's and used css to overwrite existing styles to this site.

    Im trying to make the site displayable on ipad's and mobile phones. So far its 90% on the ipad but on a mobile phone. The header and logo/contact information completely vanish's along with the navigation bar.

    Any tips and suggestions on where to start.

    Thanks Danny

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Does the navbar transform to a drop-down menu?

  3. danny_getextra
    Member
    Posted 1 year ago #

    im a complete rookie with media queries, I've used wptouch and it has like a one click navigation bar that says home and when you click on it. There's a small menu appears with the other links on. But its not very clear.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes the navigation reduces to a drop-down menu, which is a practical work-around for reducing font size or increasing menu size. This is normal behavior.

    Is your issue with the banner? I'm not sure what you mean by 'vanishing' logo, it still appears when I resize my browser to the mobile's size.

  5. danny_getextra
    Member
    Posted 1 year ago #

    Its with the header and the widgets under the slider.

    Sorry for not been very descriptive. the telephone number and the email address tangle up at the top right. and the widget text at the bottom becomes overlaps with the footer.

    thanks

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    I would recommend moving the contact info outside of the logo element first;

    <div id="logo">
                <!-- <p>School of Motoring</p> -->
    
                <!--  <span class="site-name"><a href="http://www.lburner.co.uk/wp/" title="lburner" rel="home">lburner</a></span>
                <span class="site-description">Just another WordPress site</span> -->
            </div>
    
    <div id="contactinfo">
    <ul class="stack_contact">
    <li class="telephone-number">01482 568 007</li>
    <li class="email">nigebenno@hotmail.com</li>
    </ul>
    </div>

    Then add a width of 55% to the logo;
    E.g

    #logo {
     width: 55%;
    }

    Now this makes it easier to apply media queries to resolve this tangled issue.

    At the browser width in which the tangle-up occurs (using media queries), try;

    #contactinfo {
     float: none;
     clear: both;
    }
    
    .stack_contact {
     display: block;
     float: left;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic