[Resolved] Responsive text in header

[Andreas]

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!

[Andreas]

Could you please delete the text and the phone number on your webside!

[Tom]

Try adding this CSS:

@media (max-width:768px) {
      .tagline {
            width: 100%;
            float: none;
            text-align: center;
      }
}

[Andreas]

That works fine! Thanks a lot…

[Tom]

You’re welcome 🙂

[Andreas]

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;
          }
}

[Tom]

That sounds super weird – not sure why closing the print preview would modify any existing CSS.

Can you link me to the page?

[Andreas]

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.

http://wp1139019.server-he.de/

[Tom]

Try changing .tagline to float: left and instead of right.

Then add this as well:

@media (min-width: 769px) {
    .site-logo {
        float: left;
    }
}

[Andreas]

That works fine! Thanks a lot…!

[Tom]

No worries:) Glad I could help

[Author]

Posts