Unable to apply media query for font size

[ipbr21054]

Evening all,

Here is the site in question The Attic Banwell

I am looking to target small screens in portrait mode like iphone 5 etc
I would like to alter the font size so its shown on one line as opposed to two line,
"Scroll down & click photos below"

Learning / using chrome dev tools i can alter the Header h1 & header p text ok.
I am having problems trying to pin point the correct part for the text to be adjusted.

I see header ul li p but no change was made with these sections.
I am using the media query shown below to do it,

      @media only screen and (max-device-width: 568px) and (orientation: portrait){
	  #header p{
	  font-size: 8px;
  }

3621.jpg

I could easily change the word but rather learn/fix the issue & not bypass it.

Could you assist please.

[ipbr21054]

Maybe it wasnt the text size at fault but the padding etc ?

I have added this at the bottom of my css file and seems to work / look ok to me.
Hope you can check & confirm.

      @media only screen and (max-device-width: 568px) and (orientation: portrait){
		  ul li {
			  padding: 0.5em 0.25em 0.25em 0.25em ;
		  }
	  		ul {
			padding-left: 0.50em;
		}

[Ronald Roe]

In general, when you're using media queries, your selector has to be the same or have higher specificity. I noticed that you mention header ul li p, but in the example code in your first post, you use #header p. 2 things are going on there. In one, you're querying the element header, and the other, you're querying the id header. Also, 1 of those selectors has a lower specificity than the other. This is why it's best/easiest to use the exact same selector for both.

[ipbr21054]

Hi,
I was mentioning that i was able to change the header, then moving down the page i was then able to change the p tag text BUT when it came down to the text that i wanted to change "scroll down and click photos below" i couldnt change it.
Using chrome dev tools i had seen ul li & p when i hovered over or next to it but no change was made.

Since then i have altered the padding etc as mentioned above for 568 or lower and not touching the font size and it seems to have done the trick.

As i type i am now looking for sort out the landscape view.

Thanks.