[Resolved] Mobile Header

Home Forums Support [Resolved] Mobile Header

Home Forums Support Mobile Header

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #247812
    Aaron

    The header is fine when viewing on a desktop however I noticed when viewing from a tablet or phone my header categories are above the logo pic

    How can I get the categories in the same space as the logo just like when viewing from a desktop?

    #247874
    Tom
    Lead Developer
    Lead Developer

    You could do this:

    @media (max-width: 1024px) and (min-width: 769px) {
        .secondary-nav-float-right .secondary-navigation {
            float: right;
            margin-bottom: 0;
            margin-top: 0;
        }
    }

    However there probably won’t be enough room for it to float next to the logo on smaller screens, so you can reduce the font size and spacing between items with this:

    @media (max-width: 1024px) and (min-width: 769px) {
        .secondary-navigation .main-nav ul li a {
            font-size: 13px;
            padding: 0 7px;
        }
    }
    #247887
    Aaron

    Worked perfectly πŸ™‚ Any websites you recommend to learn about these things?

    #247899
    Tom
    Lead Developer
    Lead Developer

    Codecademy is good for basic CSS training.

    Playing around with the developer tools (right click + inspect) in Chrome is awesome as well.

    #249557
    Aaron

    The website is a great learning tool I have started to read up on the training there, thanks for the recommendation. Btw I also wanted to know how I could change the border size but only for mobile view, the border is fine for desktop viewing but I feel it’s taking up too much space when viewing on a mobile device img this is a screenshot of the site viewing from a tablet

    #249581
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    @media (max-width: 768px) {
        .include-border .wp-show-posts-inner,
        .wp-show-posts-inner {
            border-width: 2px;
        }
    }
    #249588
    Aaron

    Tried the CSS it didn’t work btw when I said border was referring to img

    #249599
    Tom
    Lead Developer
    Lead Developer

    Same concept, just add new padding values to the .whole-site-container class inside a media query:

    @media (max-width: 768px) {
        /* Mobile CSS in here */
    }
    #250314
    Aaron

    Thanks the borders look great on a cell phone now what about if I wanted to do the same adjusting on a ipad?

    #250316
    Tom
    Lead Developer
    Lead Developer

    Tablets can be done like this:

    @media (min-width: 769px) and (max-width: 1024px) {
        /* CSS for tablets */
    }
    #250330
    Aaron

    Perfect! It looks great, sorry for me keep asking questions lol but when the tablet is shown on vertical display instead of horizontal is there a certain way for that as well?
    Btw I made a small contribution for your help πŸ™‚

    #250408
    Tom
    Lead Developer
    Lead Developer

    Thank you so much for the donation! I really appreciate it πŸ™‚

    This article has lots of information regarding media queries for specific tablets/orientations etc: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    #250442
    Aaron

    Thanks πŸ™‚ after reading the article I learned all I needed to do was place my custom css inside the iPad portrait media query provided from that site. Looks good now

    #250461
    Tom
    Lead Developer
    Lead Developer

    Awesome! πŸ™‚

    #251119
    Aaron

    1.) After testing views from a ipad/tablets I noticed that when in portrait mode that my categories become hidden within a secondary menu toggle centered above my logo.. how can I make it so that It is just like viewing from a desktop with the categories to the right of the logo? I don’t want the secondary menu toggle just the categories
    img

    2.) I also noticed my sidebar widget is now next to the footer and takes up the full width space how can I adjust it so that the sidebar widget stays in it’s same space as the desktop view or even landscape? This only happens in portrait mode tho it’s fine when viewing from a ipad/tablet in landscape mode

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.