Adaline theme CSS

  • Author
    Posts
  • #3375585

    kdoolz1
    Member

    I am trying to remove the squiggly line from between the title and tagline section on my blog. Does anybody know how to edit the CSS to do this?

    It’s the Adaline theme.

    Thanks!

    The blog I need help with is offbeatpetite.com.

    #3375604

    kokkieh
    Staff

    Hi there,

    That squiggly line actually appears below the title and tagline, not between. But more importantly, you don’t currently have a title set for your site at all. Yes, you have it in your site logo, but if you don’t set a title and tagline, your site’s HTML code won’t display any title for search engines to index – they can’t pull that from your logo image.

    So first, go to My Site ->Design ->Customize, and add your title and tagline there. Then uncheck the box next to Display Site Title and Tagline. That way the title won’t be visible on the site, but it will be visible in the source code for search engines, browsers, and screen reading software to see. (Also for Facebook, Twitter, etc, to use in previews when your posts are shared there.)

    Next, you can add this CSS to remove that line:

    /*
    Remove squiggly line below site title.
    */
    .site-branding::after, site-info::before {
    	content: none;
    }

    But you’ll notice when you add that the header area sort of collapses. That’s because it gets its height from whatever is inside it, i.e. the title, tagline, and squiggly line. By removing those, there’s nothing to add height to that element, so it becomes shorter. This code will prevent that from happening:

    /*
    Forces minimum height for custom header on desktop screens
    */
    @media (min-width: 1000px) {
    .site-header {
    	min-height: 300px;
    }
    }

You must be logged in to reply to this topic.