Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #165963
    rgraham
    Participant

    Hello, I have done a lot of trial and error with the CSS to get the logo centered and sized how I want it on a computer screen, but it is not responsive for mobile. Is there a better way I should do this? How do I get it to work for mobile?

    /*SPACE ABOVE & BELOW LOGO*/
    .site-header-main {
    padding-top:25px;
    padding-bottom: 90px;
    margin-top:0px;
    margin-bottom: 0px;
    }

    /*LOGO SIZE*/
    .custom-logo {
    margin:0px auto;
    max-width:684px;
    height: 80px;
    }

    .site-branding {
    position: absolute;
    height: 100px;
    left:29%;
    transform:translateX(-50%);
    }

    #165964
    rgraham
    Participant

    Adding to the inquiry above ^^
    I’m using Solid Construction Pro Child theme. This is a staging site, so I can’t post the link because the client isn’t ready for the site to go public. (This is one of the final things we need to fix before the site can launch.) But I could email you the link if that helps.

    #165977
    Skandha
    Participant

    @rgraham: I will need to check your site in order to look into the issue. Since your site isn’t live I will need your WP admin login credentials. I will contact you shortly by email.

    Kind Regards,
    Skandha

    #166080
    Skandha
    Participant

    @rgraham: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width:1024px) {
    	.custom-logo {
    		max-width:76vw;
    		margin-top:20px;
    	}
    }

    Let me know if this solves your issue.
    Kind Regards,
    Skandha

    #166194
    rgraham
    Participant

    Hi Skandha,

    I appreciate your response, truly. The added CSS didn’t resolve the issue. On the computer monitor view, all is well. On the phone view, the effect was to shove the logo all the way to the left, and squish it (narrower than it should be). On the tablet view, it is a little off-center and slightly narrow.

    Here is the CSS as it stands now (below), with your CSS at the end, still no luck. Perhaps some of these aren’t playing well together. So how do we get the logo sized as I want it, centered and responsive in computer, tablet and phone?

    /*SPACE BETWEEN LARGE HEADER PIC & TEXT BELOW IT*/
    .entry-header {
    margin-top: -60px;
    }

    /*SPACE ABOVE & BELOW LOGO*/
    .site-header-main {
    padding-top:25px;
    padding-bottom: 90px;
    margin-top:0px;
    margin-bottom: 0px;
    }

    /*CSS FROM CATCH THEMES LOGO CENTERING THREAD*/
    .site-branding {
    position:absolute;
    left:29%;
    transform:translateX(-50%);
    margin: 0px auto !important;
    height: 100px;
    }

    /*LOGO SIZE*/
    .custom-logo {
    margin:0px auto;
    max-width:684px;
    height: 80px;
    }

    /*CSS FROM CATCH THEMES SKANDHA*/

    @media
    screen and (max-width:1024px) {
    .custom-logo {
    max-width:76vw;
    margin-top:20px;
    }
    }

    #166214
    Skandha
    Participant

    @rgraham: Hello there,
    What you can do first of all remove all the CSS Code you have added for the logo and site header.

    Then Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .custom-logo-link {
    	max-width:80%;
    }

    You can alter the max-width according to your requirement.
    Let me know if this solves the issue.
    Kind Regards,
    Skandha

    #166266
    rgraham
    Participant

    That works! Per your instructions, I deleted the CSS I had, added yours in, adjusted max-width value a bit, and then added a little of my CSS back in and tweaked it to adjust space above & below the logo. Final CSS looks like this, and it works on monitor, tablet and phone views:

    .custom-logo-link {
    max-width:74%;
    }

    .site-header-main {
    margin-top: -25px;
    margin-bottom: -40px;
    }

    Thank you so much for the stellar support on this! I really appreciate your help and persistence.

    #166310
    Skandha
    Participant

    @rgraham: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/solid-construction/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

    Kind Regards,
    Skandha

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Need logo larger, centered, and responsive on mobile’ is closed to new replies.