[Resolved] Lines on Sides of Logo

Home Forums Support [Resolved] Lines on Sides of Logo

Home Forums Support Lines on Sides of Logo

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1480254
    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?

    #1480788
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1480902
    Adrian

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

    Thank you a lot!

    #1480925
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.