- This topic has 10 replies, 2 voices, and was last updated 10 years, 6 months ago by
.
-
Posts
-
Hi Tom,
I used a hook after the header content to show a text next to the logo. It works fine but I have a problem to make the text responsive.
<div class="tagline"> <h3><i class="fa fa-phone"></i> **</h3> <em>**"</em> </div>That’s what I’ve tried
.tagline { float: right; padding-top: 10px; width: 500px; position: relative; vertical-align: middle; }Thanks in advance!
Could you please delete the text and the phone number on your webside!
Lead Developer
Try adding this CSS:
@media (max-width:768px) { .tagline { width: 100%; float: none; text-align: center; } }That works fine! Thanks a lot…
You’re welcome 🙂
Hi Tom,
Unfortunately, I have another problem with the header text. When I get back to the site from the print preview the whole container is moved down. Do you have any idea why this is and how I can fix it?
My current code looks like this
.tagline { float: right; padding-top: 10px; width: 500px; overflow: hidden; } @media (max-width:768px) { .tagline { width: 100%; float: none; text-align: center; margin-top: 10px !important; } } @media (min-width: 769px) and (max-width: 1024px) { .tagline { float: right; padding-top: 10px; width: 370px; overflow: hidden; } }That sounds super weird – not sure why closing the print preview would modify any existing CSS.
Can you link me to the page?
Hi Tom,
not only the print preview would modify the css. I have the same problem when I minimize the browser window to a smaller view and then maximize it again.
Try changing
.taglinetofloat: leftand instead of right.Then add this as well:
@media (min-width: 769px) { .site-logo { float: left; } }That works fine! Thanks a lot…!
No worries:) Glad I could help
- You must be logged in to reply to this topic.
