Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive header News Pro
Tagged: News Pro, responsive header
- This topic has 7 replies, 2 voices, and was last updated 10 years ago by Tim Squires.
-
AuthorPosts
-
March 30, 2014 at 4:48 am #97393Tim SquiresMember
Hello,
I am trying to make the header responsive in News Pro theme.The steps outlined in this tutorial seem very solid and make sense, but I must be doing something wrong because I can't get them to work.
http://thepixelista.com/responsive-genesis-child-theme-logo/#/I was successful in getting the first step right, and my largest test logo/masthead is displaying correctly, but I can't get it to work for the other sizes.
Part of the problem is that I can't figure out exactly where to paste the fresh code with the new media query sizes — all of the sizes in the News Pro css seem different to the sizes in the tutorial.
I though that a good step would be to get at least one of the new sized logos showing, I tried pasting this code for the smallest size right at the end of the css, in the hope that it would override anything else, but it didn't work:
@media only screen and (max-width: 240px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast240.jpg) no-repeat; height: 55px; width: 240px; }
Does anyone have any advice on this issue?
Many thanks,
Tim
http://timsquires.com.au/tiger/March 30, 2014 at 7:38 am #97397SusanModeratorTim:
It looks like you got it right to me in terms of scaling (although I'm wondering if you meant to load the same image multiple times at the different sizes). Here's a screenshot of what I'm seeing using the StudioPress mobile responsive checker:
screenshotMarch 30, 2014 at 12:30 pm #97505Tim SquiresMemberHi Susan,
Thank you for running the test. I didn't know about the StudioPress responsive checker, so that will be very useful for me.
Yes, it works in terms of reducing the 1140px wide header down to fit smaller sizes, but what I need is for the media queries to deliver the logos at the requires sizes as you mentioned.
I have attached two screenshots. One shows the various sized test headers that I have uploaded, and the other shows how I would like them to display on the various screens (I cut and pasted using your screenshot).
As an experiment I tried putting in a media query for the smallest image, but it's not working, so I thought that I need to get that right before I go ahead and do all of the others.
Thanks again for your help - much appreciated.
Tim
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/sizes.jpg
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/sizes2.jpg
March 31, 2014 at 4:17 am #97590Tim SquiresMemberI've made a little bit of progress — I have managed to get my smallest header logo displaying, but it has some ugly white space around it that I need to remove.
http://timsquires.com.au/tiger/wp-content/uploads/2014/03/media.jpg
Also, the recommended width sizes from the tutorial were:
240px
320px
480px
768px
1040pxHowever, my News Pro child theme lists only these width sizes in the css:
1188px
1023px
600pxI'm not sure how to make these media query sizes match up with my image sizes. Maybe I need to make only the three images specific to News Pro, but not sure.
Will keep trying 🙂 ...
March 31, 2014 at 5:57 am #97594SusanModeratorTim - if you only make your images match the size of the New Pro themes, then they will be cut off in anything smaller than 600px. If you had a logo, rather than a full width header, then you wouldn't need to do anything extra.
So, to accommodate anything smaller than 6oopx, you would either need to add in the additional sizes, or make the choice to use a logo style header for that 600px size.
March 31, 2014 at 12:32 pm #97719Tim SquiresMemberHi Susan,
Thanks very much again — the design that we have does need to have a full width header, and we were going to smaller versions of it for the smaller screen sizes by re-arranging the type and images within it.I would really like to do as you suggest and add in the additional media query sizes to the theme.
In order to do that, should I just add the code to the end of the style sheet like this?
@media only screen and (max-width: 1140px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast1140.jpg) no-repeat; height: 155px; @media only screen and (max-width: 768px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast768.jpg) no-repeat; height: 155px; width: 100%; } @media only screen and (max-width: 480px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast480.jpg) no-repeat; height: 155px; } @media only screen and (max-width: 320px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast320.jpg) no-repeat; height: 155px; width: 100%; } @media only screen and (max-width: 240px) { .header-image .site-title a { background: url(http://timsquires.com.au/tiger/wp-content/uploads/2014/03/mast240.jpg) no-repeat; height: 155px; width: 100%; }
March 31, 2014 at 12:44 pm #97726SusanModeratorTim:
I'm not looking at the News Pro stylesheet right now, but you would put the media queries in order of size. So, for example, if the News Pro already has queries for 1188 and 1023, put the code for 1140 between those two areas; the 768 code would go before the 600px code, and then the rest (468, 320, and 240) can go at the end.
March 31, 2014 at 2:18 pm #97748Tim SquiresMemberHi Susan,
You are worth your weight in gold - thank you! Here's the result that I have right now:http://timsquires.com.au/tiger/wp-content/uploads/2014/04/01APR14.jpg
It's getting much closer now — all that remains is to remove the white space around each image, so that it fills the area (like the 1140px image is almost doing)
I hate to ask more of you after all of your time and effort, but do you have any thoughts on how that may be achieved?
I'll keep experimenting in the meantime.
Thanks again — very much appreciated.
Tim
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.