Community Forums › Forums › Archived Forums › General Discussion › Media Query Settings for Outreach
- This topic has 9 replies, 4 voices, and was last updated 10 years, 5 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
November 12, 2013 at 10:17 pm #72629dareadelParticipant
I have spent frustrating and fruitless hours trying to adjust the media queries for the Outreach theme. The home widgets stack above each other at a slight reduction on desktop screen. Screen width of less than 95% will stack the home page and this should not be so. I would like to adjust any the following queries (from the theme style) so there will be no stacking for for both desktop and (or at least landscape) tablet:
@media only screen and (max-width: 1200px)
@media only screen and (max-width: 1023px)I know this is not difficult but except when I am building an HTML page from scratch; but this one is a bit challenging and I need help.
Please note that I do not have any link to share because I am doing this on a local network.
Thanks anyone.
November 13, 2013 at 4:05 pm #72783Tony @ AlphaBlossomMemberHello,
It's hard to know how helpful I can be without seeing the site you're working on, so I'll try to go off of the Outreach theme off of the StudioPress website.
On the demo Outreach theme, the boxes stack vertically at 1023px. You want to keep them 4 across, and I imagine at some point 2 across and probably one when it gets narrow enough.
There's a lot of ways to do this...probably the way I would handle it is to change the widgets to % instead of fixed widths for the main css...then change the % using media queries where it makes sense.
Around line 549 of your theme's style.css, you have .home-1, .home-2, .home-3 and .home-4. I would remove those 4 rules and replace them with:
.home-1, .home-2, .home-3, .home-4 { width: 23%; margin: 0 1%; float: left; }
You can center your image in each div with the following:
#home-sections .alignnone { display: block; margin: 0 auto 10px; text-align: center; }
You'll now be able to completely remove the rules for .home-1 thru .home-4 in your 1023px media query...you may want to leave "text-align: center;" but that's personal preference.
At some point, you'll want to add a new media query and change the width for two widgets across. Maybe at 768px, or maybe a little higher depending on what you want:
@media only screen and (max-width: 768px) { .home-1, .home-2, .home-3, .home-4 { width: 40%; margin-left: 5%; margin-right: 5%; } }
Change the percentages to whatever you want, but make sure they equal 100%; You should be able to remove any other references to .home-1 thru .home-4 and get the effect you want. When you're ready to go to one across, just add your new media query (maybe 480px?) and change the width and right and left margin (90%, 5%, 5%, etc).
I hope that's what you're looking for...if not, let me know.
Have a great day,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 13, 2013 at 4:16 pm #72788TeresaMemberWhen the width drops below 1024, the widgets get a width of 50% from the second media query you listed. This of course means that only two will fit in the containing space. When the width is below 600, the widgets are set to 100%, so there's room for only one.
If you're only worried about those larger screen sizes you probably have enough room to not change the width, i.e., you can just remove that part of the style block. But you will have to figure out at what width you really do not have room to keep four across, and throw in a media query and CSS to apply there. You could also fiddle with the image size, padding, margin, etc., but that would unnecessarily complicate things IMO.
Let me know if I have misunderstood the problem you're having; a screen grab or video would be helpful if that's the case.
Teresa @ the simpler web
Twitter → @thesimplerwebNovember 13, 2013 at 4:20 pm #72790dareadelParticipantThank you Tony. I have already started to create different media queries for the home widgets. Upon inspection, I saw that the only way to accomplish what I want is to put the widgets under different queries. I did something similar with the bootstrap theme but looks lime this One will be a painstaking task. I will give it a try and hope to share here when I am done. Thanks for your reply.
November 13, 2013 at 4:25 pm #72791dareadelParticipantThank you @the simpler web. I understand what you say and I am using 45px for the tablet widgets. I was using 50% which appears to be too wide and I had to reduce them to 45%.
November 13, 2013 at 4:31 pm #72792ramseypMemberIt's possible you could simply leave the stylesheet alone with the exception of changing a breakpoint to max-width 100px instead of 1023px.
Change this:
@media only screen and (max-width: 1023px)
to
@media only screen and (max-width: 1000px)
You can, of course, adjust the value to something that looks right to you, but lowering it will keep the repositioning from happening at the higher 1023px value.
Cheers!
Pat
November 13, 2013 at 4:31 pm #72794Tony @ AlphaBlossomMemberYou're welcome. If I understood correctly, it should be straightforward using the code above. Let me know if it's not working for you or if you need help with something else.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
November 13, 2013 at 4:47 pm #72800dareadelParticipantYes. I'll try it later tonight. Thanks again Tony.
Thanks also Pat. I tried reducing but never work. I believe Tony's solution will work.
November 13, 2013 at 6:54 pm #72835dareadelParticipantJust followed Tony's instructions and with a bit of other manipulations and additional media queries I was able to get the right tablet display. I now have 2-column home widgets for tablets and a vertically stacked mobile display.
I appreciate all the helps.
November 13, 2013 at 9:23 pm #72869Tony @ AlphaBlossomMemberAwesome, glad we could help! Have a great night...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.