Archived topic
Responsive text in header
10 replies · Started by Anonymous on September 27, 2015
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!
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 .tagline to float: left and 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