Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Unable to apply media query for font size

    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,

    Code:
          @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.

  2.  

  3. #2
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    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.

    Code:
          @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;
    		}

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    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.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com