Responsive headers and CSS editing

  • Resolved Simon Varwell

    (@simonvarwell)


    10 years, 10 months ago

    Hi there.

    I’m trying to make the header on my website responsive to different sizes, resolutions, mobile etc.
    Website: //www.simonvarwell.co.uk
    Theme: Expound

    As much as I can figure out (and I am very much a dunce at all this malarky, so tell me if I’m wrong), I need to edit the theme.

    However, when I go into Appearance > Editor, I cannot open any of the files on the right, nor even simply click “Update File” on style.css – all actions lead to a page saying the page cannot be found.

    Does that mean there’s something wrong with my set-up of the Theme, or my website generally?

    Any pointers would be very gratefully received. Thanks in advance.

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter Simon Varwell

    (@simonvarwell)

    All that code does is remove the extra page title text, leaving me back where I was.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The code all together should be:

    body .site-title {
 position: static !important;
 font-weight: bold;
 margin-top: 1em;
}

.site-title a {
 color: black;
}

/* Mobile by default*/
body .site-title {
 font-size: 200%;
}

/* Desktop by media query */
@media screen and (min-width: 800px) {
 body .site-title {
  font-size: 3.1em;
 }
}

    Thread Starter Simon Varwell

    (@simonvarwell)

    Nope, I’m afraid that still leaves the text off-kilter to the right on the smallest screen size (iPhone portrait, and fully narrowed desktop).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Resize the “200%” (sorry I was just guessing the number) to something more realistic here:

    /* Mobile by default*/
body .site-title {
 font-size: 200%;
}

    Thread Starter Simon Varwell

    (@simonvarwell)

    Marvellous, that’s cracked it, the header looks great now. Thanks so much Andrew, your help and patience is very much appreciated.

    It’s given me a bit of understanding about how CSS works too. Thanks again.

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Responsive headers and CSS editing’ is closed to new replies.