Title and Tag Line always on separate lines in header

Home Forums Modern Title and Tag Line always on separate lines in header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22834
    ZenMasterBear
    Participant

    Title and Tag Line always on separate lines in header

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,

    I have done a bunch of digging and can’t figure out how to do this. I have a title and tag line for my site. If the browser window is too wide the Tag Line ends up on the same line as the Title. I want to prevent this from ever happening.

    If you go to my site and play with the browser width (I have tried this in both Chrome and Safari on MacOS 10.14.6) you will see two very different looks. The ‘narrow’ look has the Title and Tag Line on separate lines and aligned with the photo of the bear.

    The ‘wide’ look has the Title and Tag Line on the same line and beneath the bear photo.

    I would like the site to always display in the ‘narrow’ mode no matter what the browser width. I’m actually ok with the text always being beneath the bear photo (which is how it appears on my phone).

    It also does some interesting mangling as the window gets really narrow, but that seems less important.

    I am attaching a screen grab of the narrow look.

    Alternatively, if you have an idea about how I could actually implement the text in the tag line as ‘footnotes’ that appear within the header, that would be amazing, but probably a lot more work than my first request.

    Thank you for any assistance you can offer.

    Sincerely,

    daniel

    #22836
    Oliver Juhas
    Keymaster

    Hi daniel,

    As you can see on theme demo website, the site title and tagline should be on the same line by theme design. To align the site branding section to your needs use custom CSS:

    .site-description {
    	display: block;
    	padding-left: 0;
    	margin-left: 0;
    	border-left: 0;
    }

    Tip: Try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #22837
    ZenMasterBear
    Participant

    Amazing!! Thank you so much for such a prompt and perfect reply! That does exactly what I wanted.

    I’m going to go make a donation to you guys now!

    #22844
    Oliver Juhas
    Keymaster

    Hi daniel,

    Glad the solution worked and thank you for donation! :)

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.