Mobile Header

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;
    }
}

Worked perfectly :) Any websites you recommend to learn about these things?

Codecademy is good for basic CSS training.

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

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 this is a screenshot of the site viewing from a tablet

Give this a shot:

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

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

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 */
}

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

Tablets can be done like this:

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

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 :)

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/

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

Awesome! :)

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

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