responsive logo?

[alan3]

I’m using Construction upgraded to Pro. The client is obsessed with the layout of the header area, so currently the “logo” includes contact info. That being said, the logo graphic does not scale, it squishes. Obviously it should be responsive. What have I done wrong? Any tips? Thanks.

https://www.hometeamoregon.net

[Forum Moderator]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

.header .header-inner .logo { float:none; margin:0 auto; display: table;}

@media screen and (max-width:767px) {
.header .header-inner .logo img { max-width:100%; height:auto !important;}
}

Regards,
Chris

[alan3]

Thanks Chris! I also appreciate the timely response, you guys are great. Keep up the good work.

[Forum Moderator]

Hi Alan,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/12/

Regards,
Chris

[alan3]

I did as you suggested and it helped a little bit but it isn’t a complete fix. There is still an in-between stage where the logo squishes. You can see it on the live site or here: https://imgur.com/a/qCFKw

[Forum Moderator]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (min-width:768px) and (max-width:1169px) {
.header .header-inner .logo { width:70%;}
.header .header-inner .logo img { height:auto;}
}

Regards,
Chris

[alan3]

Thanks for the quick response. That did affect the issue but now the squishing occurs on the mobile version, instead of the middle size version. Should I send you a new screenshot?

[Forum Moderator]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.header .header-inner .logo img { height:auto !important;}
}

Regards,
Chris

[alan3]

Getting closer Chris, thank you for your attention. The mid range is still squishy however. Take a look. The custom CSS area is getting crowded with several solutions, I’m pasting it below… perhaps you’ll see a conflict related to this issue?

.header .header-inner .logo { float:none; margin:0 auto; display: table;}

@media screen and (max-width:767px) {
.header .header-inner .logo img { height:auto !important;}
}

@media screen and (min-width:768px) and (max-width:1169px) {
.header .header-inner .logo { width:70%;}
.header .header-inner .logo img { height:auto;}
}

#sidebar label{display: inline !important;
font-family: “Helvetica Neue”, Arial, Helvetica, Geneva, sans-serif;

color: #000;
}
.header_row .column-1 { width:40%;}

#sidebar label {
    display: inline !important;
}

.swpm-login-form-register-link {
display: none;
}

.swpm-login-widget-form .register_link {
display: none;
}

[Forum Moderator]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

Remove

@media screen and (min-width:768px) and (max-width:1169px) {
.header .header-inner .logo { width:70%;}
.header .header-inner .logo img { height:auto;}
}

And add this new code there.

@media screen and (min-width:768px) and (max-width:1169px) {
.header .header-inner .logo { width:70%;}
.header .header-inner .logo img { height:auto !important;}
}

Regards,
Chris

[alan3]

Chris, that’s awesome and did the trick. Thanks so much! Your support is amazing, patient, and attentive.

[Forum Moderator]

Hi Alan,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/13/

Regards,
Chris

[Author]

Posts