- This topic has 29 replies, 2 voices, and was last updated 7 years, 3 months ago by Tom.
-
AuthorPosts
-
November 25, 2016 at 4:08 pm #247812Aaron
The header is fine when viewing on a desktop however I noticed when viewing from a tablet or phone my header categories are above the logo
How can I get the categories in the same space as the logo just like when viewing from a desktop?
November 25, 2016 at 8:41 pm #247874TomLead DeveloperLead DeveloperYou could do this:
@media (max-width: 1024px) and (min-width: 769px) { .secondary-nav-float-right .secondary-navigation { float: right; margin-bottom: 0; margin-top: 0; } }
However there probably won’t be enough room for it to float next to the logo on smaller screens, so you can reduce the font size and spacing between items with this:
@media (max-width: 1024px) and (min-width: 769px) { .secondary-navigation .main-nav ul li a { font-size: 13px; padding: 0 7px; } }
November 25, 2016 at 10:00 pm #247887AaronWorked perfectly π Any websites you recommend to learn about these things?
November 26, 2016 at 12:17 am #247899TomLead DeveloperLead DeveloperCodecademy is good for basic CSS training.
Playing around with the developer tools (right click + inspect) in Chrome is awesome as well.
November 29, 2016 at 8:44 pm #249557AaronThe website is a great learning tool I have started to read up on the training there, thanks for the recommendation. Btw I also wanted to know how I could change the border size but only for mobile view, the border is fine for desktop viewing but I feel it’s taking up too much space when viewing on a mobile device this is a screenshot of the site viewing from a tablet
November 29, 2016 at 10:06 pm #249581TomLead DeveloperLead DeveloperGive this a shot:
@media (max-width: 768px) { .include-border .wp-show-posts-inner, .wp-show-posts-inner { border-width: 2px; } }
November 29, 2016 at 10:47 pm #249588AaronTried the CSS it didn’t work btw when I said border was referring to
November 29, 2016 at 11:44 pm #249599TomLead DeveloperLead DeveloperSame concept, just add new padding values to the .whole-site-container class inside a media query:
@media (max-width: 768px) { /* Mobile CSS in here */ }
December 1, 2016 at 11:34 am #250314AaronThanks the borders look great on a cell phone now what about if I wanted to do the same adjusting on a ipad?
December 1, 2016 at 11:38 am #250316TomLead DeveloperLead DeveloperTablets can be done like this:
@media (min-width: 769px) and (max-width: 1024px) { /* CSS for tablets */ }
December 1, 2016 at 12:26 pm #250330AaronPerfect! It looks great, sorry for me keep asking questions lol but when the tablet is shown on vertical display instead of horizontal is there a certain way for that as well?
Btw I made a small contribution for your help πDecember 1, 2016 at 5:22 pm #250408TomLead DeveloperLead DeveloperThank you so much for the donation! I really appreciate it π
This article has lots of information regarding media queries for specific tablets/orientations etc: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
December 1, 2016 at 8:12 pm #250442AaronThanks π after reading the article I learned all I needed to do was place my custom css inside the iPad portrait media query provided from that site. Looks good now
December 1, 2016 at 9:49 pm #250461TomLead DeveloperLead DeveloperAwesome! π
December 3, 2016 at 3:01 pm #251119Aaron1.) After testing views from a ipad/tablets I noticed that when in portrait mode that my categories become hidden within a secondary menu toggle centered above my logo.. how can I make it so that It is just like viewing from a desktop with the categories to the right of the logo? I don’t want the secondary menu toggle just the categories
2.) I also noticed my sidebar widget is now next to the footer and takes up the full width space how can I adjust it so that the sidebar widget stays in it’s same space as the desktop view or even landscape? This only happens in portrait mode tho it’s fine when viewing from a ipad/tablet in landscape mode
-
AuthorPosts
- You must be logged in to reply to this topic.