[Resolved] Lines on Sides of Logo

[Adrian]

Hi guys,

I am trying to have 2 horizontal lines for design purpose on the both sides of my centered logo.
I’ve achieved that with this code:

.site-logo {
  	line-height: 0.5;
  	text-align: center;
}

.site-logo a {
  	display: inline-block;
  	position: relative;  
}

.site-logo a:before,
.site-logo a:after {
  	content: "";
  	position: absolute;
  	height: 5px;
  	border-bottom: 1px solid white;
  	border-top: 1px solid white;
	margin-top: 35px;
  	top: 0;
  	width: 600px;
}

.site-logo a:before {
  	right: 100%;
  	margin-right: 15px;
}

.site-logo a:after {
  	left: 100%;
  	margin-left: 15px;
}

.site-logo div {
  	margin: 0 0 0.25em 0;
}

.site-logo div {
  	font-size: 0.7em;
}

The only issue that I have now is removing the lines from the mobile version of the website.
I know I’ve got to use @media, but how exactly?

[Leo]

Hi there,

You could just wrap the CSS in desktop only media query:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Let me know if this helps 🙂

[Adrian]

Oh, for some reason my brain didn’t consider using min-width, it clicked when I saw that page.

Thank you a lot!

[Leo]

No problem 🙂

[Author]

Posts