Additional CSS not applying to tablet or mobile versions of site

  • Resolved clive57

    (@clive57)


    4 years, 8 months ago

    On my website I have various additional CSS to change the size of the site heading, the page headings and the size and colour of the site description. All this works fine and is as I want it on the desktop version of the site but these changes don’t seem to apply very successfully to the tablet or mobile version of the site. Am I doing something wrong?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator James Huff

    (@macmanx)

    The theme uses media queries to determine additional changes for screen sizes, so you may need to apply the same changes under those.

    You’ll find the section at the bottom of the style.css file. Here’s an excerpt from the top for what you’re looking for:

    @media screen and (min-width: 75em) {
	.site {
		max-width: 1153px;
		margin: 54px auto;
		padding: 54px 108px;
	}
}
@media screen and (min-width: 55em) {
	.no-sidebar .site {
		max-width: 872px;
		padding: 54px 108px;
	}
}
@media screen and (min-width: 50em) {

	h1 {
		font-size: 32px;
	}
}
    Thread Starter clive57

    (@clive57)

    Thank you, sorry but I’m not quite understanding . . . could you give me an example of the media query code for changing my site description (Artist and Printmaker) to black as I have done to the desktop site please.

    Moderator James Huff

    (@macmanx)

    Sure, what CSS did you add to make your initial changes?

    Thread Starter clive57

    (@clive57)

    OK, well here is the CSS which I have working fine on the desktop site, I also notice it seems to work on my tablet but only in the landscape format not portrait or on a mobile –

    }
    .site-description {
    font-size: 20px;
    }
    .site-description{
    color:#000000;
    }
    .site-title{
    font-size: 33px;
    }
    .wf-active .page .entry-title {
    font-size: 26px;
    }

    Moderator James Huff

    (@macmanx)

    Ok, try this:

    @media screen and (min-width: 75em) {
.site-description {
font-size: 20px;
}
.site-description{
color:#000000;
}
.site-title{
font-size: 33px;
}
.wf-active .page .entry-title {
font-size: 26px;
}
}
@media screen and (min-width: 55em) {
.site-description {
font-size: 20px;
}
.site-description{
color:#000000;
}
.site-title{
font-size: 33px;
}
.wf-active .page .entry-title {
font-size: 26px;
}
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Additional CSS not applying to tablet or mobile versions of site’ is closed to new replies.