Logo not responding for Mobile Version

Hello again. I know, two questions in one day but I promise that I have found so many solutions on my own that I would have previously come to y'all for :slight_smile: I know you are here to help but I don't want to be buggy!

Ok, so I have done a lot of CSS editing to get the logo positioned the way that it is on this site, pennynicholslightingdesigns.com

Essentially I wanted it to be larger than the container when you first get to the page and to be situated between the menu items. The theme automatically centered the logo above the menu items.

While the solution looks great on the desktop, it is no longer responding for mobile…yikes!

Would utilizing this css in some way help me to fix this, like only applying my CSS to desktop and not to mobile? How exactly would I do that:
@media all and (max-width: 720px) {

Any help on this would be great! Thank you!

Pura Vida,
Mandy

  • Imperative Ideas

    This should walk you through media queries:
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    All is redundant, you only really need to specify between screen and print. Since most websites don't include a working print.css file anyway, you can skip the variable.

    The key with responsive elements is that you define them in order. The recommended route is to practice progressive enhancement, so that you write your mobile definitions first then enhance the design with min-width queries.

    Using max-width queries is more common because again, the majority of designers prefer to work the beautiful application first and then worry about mobile support. I'm guilty of doing that myself even in some recent examples. I mentally slap myself on the wrist every time.

  • Imperative Ideas

    Sorry - didn't finish that thought.

    The order is important. If you define a default variable after your responsive one, the second item will take precedence.

    It'll make your head spin, but specificity matters as well. If my more specific definition is first, it'll override the later one. For example.

    #wrap .page .entry-content ul.basic li a {
       color: green;
    }
    
    a {
       color: blue
    }

    In this case, the link will remain green because of the specificity points the previous entry has accumulated.

  • Mandy

    @Imperative Ideas, thank you for the insight and the input! It is head spinning to learn all of this as you go but I seem to keep progressing so it keeps me positive! With people like yourself and @Michelle Shull on my side, I can only see things getting better!

    I get the specificity thing I was more curious about writing css where one specificity contains another (I know my lingo is not official :slight_smile:

    Thank you both! I am going to give it a go!

    Ok, just gave it a go and all is well except there is a bar above the menu that is the color of the menu bar on the regular site. Basically, the menu background turned to white and there is now an area above it that is pink. Otherwise, worked like a charm and I learned something new! Virtual high fives and hugs to all!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.