Skip to content
SKT Themes
  • Plugins
  • Documentation
  • My Account
  • Home
  • Themes
  • Features
  • Pricing
  • Client Reviews
  • Support
  • Contact

WordPress Themes Support

Get Support here. 1000s of common questions on WordPress resolved.

Create your topic after login!

Create Topic

Forums

  • All Other Themes
  • Gravida Support
  • IT Consultant Support
  • Perfect Forum
  • SKT Full Width Forum
  • I Am One Support
  • SKT Black/White Theme Support
  • Melody Theme Support
  • Pathway Forum
  • Exceptiona Theme Support
  • Parallax Me Forum
  • Photo World/Photo Session Support
  • PicArt
  • SKT Biz/Corp Theme Support
  • Panaroma Forum
  • Toothy Theme Support
  • Lawzo Theme Support
  • Blendit Theme Support
  • Massage Center (Spa) Forum
  • Photodock theme support
  • Gym Master Theme Support
  • Handy Theme Support
  • Kraft Theme Support
  • Shudh theme support
  • Furnish theme support
  • Teethy theme support
  • Bony/Spirited Forum
  • Beauty Cuts Theme Support
  • BeFit Theme Support
  • Construction Pro/Build Forum
  • Medical
  • Fitness Pro Forum
  • Hotel Pro

Views

  • Most popular topics
  • Topics with no replies

responsive logo?

Home › Forums › Construction Pro/Build Forum › responsive logo?

  • This topic has 11 replies, 2 voices, and was last updated 5 years, 2 months ago by alan3Forum Moderator.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 29, 2017 at 12:16 pm #88497
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

    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

    November 29, 2017 at 12:38 pm #88510
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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

    November 29, 2017 at 1:28 pm #88516
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

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

    November 29, 2017 at 1:36 pm #88517
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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

    December 29, 2017 at 12:17 pm #90538
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

    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

    December 29, 2017 at 12:26 pm #90540
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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

    December 29, 2017 at 12:36 pm #90542
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

    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?

    December 29, 2017 at 12:46 pm #90543
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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

    December 29, 2017 at 1:00 pm #90544
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

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

    December 29, 2017 at 1:06 pm #90545
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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

    December 29, 2017 at 1:13 pm #90546
    alan3alan3
    Member
    • Topics: 2
    • Replies: 6
    • Total: 8
    Member since: July 19, 2017

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

    January 2, 2018 at 4:56 am #90623
    Forum ModeratorForum Moderator
    Moderator
    • Topics: 0
    • Replies: 29664
    • Total: 29664
    Member since: August 16, 2013

    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
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.
Log In

Quick Links

  • Home
  • About Us
  • Themes
  • Support
  • Documentation
  • Contact
  • Managed WordPress Hosting
  • Customization
  • Blog
  • Pricing
  • Sitemap
  • Terms
  • Privacy Policy
  • Hire WordPress Developer
  • PSD to WordPress
  • WordPress Monthly Maintenance
  • WordPress Jobs

Categories

  • Others
  • Author
  • Automotive
  • Bakery
  • Blog
  • Business
  • Church
  • Construction
  • Corporate
  • Dentist
  • Ebook
  • Ecommerce
  • Education
  • Entertainment
  • Fitness
  • Free
  • Gutenberg
  • Hotel
  • HTML
  • Interior
  • Lawyer
  • Magazine
  • Medical
  • Multipurpose
  • Music Artist
  • News
  • NGO
  • Non profit
  • One Page
  • Personal
  • Photographer
  • Plugins
  • Portfolio
  • Real Estate
  • Restaurant
  • Spa and Salon
  • Sports
  • Technology
  • Travel
  • Wedding

Recent Post

Fruits and Vegetables WordPress Themes for Organic Stores

Today, consumers all around the world are looking to reduce their ecological footprint. That is why they buy products that do not disrupt the environment. […]

Add Privacy Policy and Terms & Conditions Page in WordPress Website?

Do you want to dig into the easiest ways to add a WordPress privacy policy page and terms and conditions page in your site? If […]

White Label SEO Services are Becoming So Famous – Here is Why?

The 21st century has definitely been marked by major changes in many fields, including business. And while breathing amidst 2019, we can see that this […]

Follow Us

Facebook Twitter
Copyright © 2023 SKT Web Themes LLC