Tagline disappears in tablet & mobile view

Hi @hautecreations

I have tried your CSS on my test website but it’s not working fine on my test website. So I just bit changed the CSS and now it’s showing the tag line on all the screens.

.site-header .site-branding img{ max-height: 175px !important; } 

.site-header .site-branding img{ max-width: 200px !important; } 

.site-header .custom-logo-link { display: flex; align-items: center; }

.site-header .custom-logo-link::after {
    content: "Affordable elegance at your fingertips.";
    color: #000 !important;
    padding-left: 20px !important;
    display: inline-block !important;
}

You can change the tag line placement according to your requirements. But If the above code doesn’t work on your website, it’s challenging for me to provide precise assistance without access to the actual working website

Therefore, I kindly request you to provide the actual working website URL so that I can examine the issue more comprehensively and offer appropriate guidance. Currently, when accessing your website, we are receiving an “Error establishing a database connection” message, which prevents us from investigating further.

Please provide the working website URL, and I will do my best to assist you in resolving the CSS display issue and ensuring the desired placement of the tag line.

If you have any additional questions or concerns, please don’t hesitate to let me know. I’m here to help.

Thank you for your cooperation.

Sorry, my website was down for a couple of days. When I edited my current CSS to the one you provided, it may my tagline disappear. Can you tell me if you can make it work now? Thank you.

Hi @hautecreations

I have checked the website, and it seems like the tagline is showing fine now, you can take a look at this screenshot: https://screencast-o-matic.com/i/c01rYnVB8jG

Let me know if I am missing something important!

Thank you so much for continuing to help. Is that screenshot from the mobile view? I’m looking at it on my phone and the tagline does not show the way it shows on your screenshot. I also had a friend look on her phone and she does not see the entire tagline either.

Hi @hautecreations

It could be a cache issue, on mobile it’s showing on the right of the logo, see this screenshot: https://screencast-o-matic.com/i/c013ldVB9bM

Now if you want to show it under the logo on mobile view then add this new css too

@media screen and (max-width:480px){
.site-header .custom-logo-link::after {
    position: absolute;
    bottom: 20px;
}
}

The final output should be this:
https://screencast-o-matic.com/i/c013l7VB9F2

I hope that helps!

Thank you, but that’s not the entire tagline. As mentioned above, I want the entire tagline to show as it does on the website (www.delicatefabrics.net). I can see the same thing you are seeing. The entire tagline is “Affordable elegance at your fingertips.”

Hi @hautecreations

Yes, you need to add my above new CSS code and it will show the entire tagline under the logo on mobile view. Let me past it again:

/* show tagline under logo on mobile view */
@media screen and (max-width:480px){
.site-header .custom-logo-link::after {
    position: absolute;
    bottom: 20px;
}
}

See this screenshot: https://screencast-o-matic.com/i/c013l7VB9F2

Let me know if I am missing something important!

Thank you so much, I must have pasted something wrong so I am very happy you shared it again. It looks PERFECT!

Thanks again!

Hi @hautecreations

You’re welcome, glad to know it’s working fine now, if you have any new question, please create a new ticket.

Cheers!