Extend width of site-description

Hi,

thanks for the wonderful SYDNEY theme. I only have one question: How can I extend the width of the site-description line by e.g. 100% to avoid that it will be shown in two lines?

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4.col-sm-8,
      .site-header .col-md-8.col-sm-4 {
        width: 50%;
      }
    }

Regards,
Kharis

Thanks, that worked. - Of course the background-color had to be removed. :wink:

You’re welcome!

Sorry for the background color. That was for code debugging purpose.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Thanks again. But I now found out that this is not working on smaller screens. When reducing the browser window width to around 80%, suddently a line break apperars again, although there would be enough space to the right until the menue items begin.

Is it possible to extend the left column to e.g. to 60% and the right one to 40% and make this setting applicable also for smaller or all screens?

Reducing min-width to 100px and setting the width: 50% to larger values did not help.

Hello there,

Please provide a link to your website, so I can check it directly.

Regards,
Kharis
aThemes Support

https://kurzelinks.de/wp52

Thank you for sharing.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 768px) and (max-width:1024px) {
      .site-header .container > .row {
        position: relative;
      }
      .site-header .container > .row .col-md-4 {
        width: 100%;
        position: relative;
        background-color: #fff000;
        z-index: 6;
      }
      .site-header .container > .row .col-md-8 {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 7;
      }
    }

    @media only screen and (min-width: 1025px) {
      .site-header .container > .row .col-md-4 {
        width: 65%;
      }
      .site-header .container > .row .col-md-8 {
        width: 35%;
      }
    }

Regards,
Kharis
aThemes Support

1 Like

Thanks for the quick answer. Perfect solution. Perfect support!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support