SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 39
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Responsive Media Queries for Mobile Devices

    Hi Guys,

    Need some major help, trying to work with this to make it responsive. Like make the navigation one of the things where you can click then the Navigation pops out etc.

    And trying to make it all into one columns but having a hell of a time.

    If someone could help me get on my way with this that would be great.

    http://fuzzypanda.ca/cardemon/

    Thanks guys,

    Mike

  2. #2
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've started playing around with it and running into some issues. Below is list of what I can tell right now...

    - Bottom border on the header doesnt go all the way across
    - The track pattern doesnt go all the way across
    - How can I center the logo and navigation or better yet do one of those dropdown navigations just on mobiles.
    - Footer likes terrible doesnt even span whole width of the screen the background color
    - Most pages are zoomed right in how do I solve this everytime go to it have to zoom out
    - How can I add some padding or right margin to the right so content and border lines don't go right to edge, similar to how I have it on left
    - Forms on Service & Parts -> Online Booking and Contact Us are too wide seems to go right too edge or further of the screen
    - Used Cars page need some serious help on it, same goes for once you go into the single car

    All help is greatly appreciated and if you see any other issues with the mobile please let me know or if you have any suggestions.

    Thanks,

    Mike

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    On Chrome on mobile devices on my Samsung S3 it doesnt even scale the website down and I have my meta tag for viewport there and some other pages don't scale either.

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Also, on some devices the slider shows up on landscape mode...

    This is very frustrating, my apologies for the multiple posts, just running into issues as I try to solve it lol.

    Thanks,

    Mike

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Hi Guys,

    Need some major help, trying to work with this to make it responsive. Like make the navigation one of the things where you can click then the Navigation pops out etc.
    There are a few tutorials around that will show you how to create the mobile button menu type of navigation. There's a new course on responsive design at learnable but of course there's a cost.

    How can I add some padding or right margin to the right so content and border lines don't go right to edge,
    I'm not sure if this is what you meant but you have a minimum width which is stopping that from happening at smaller viewports:

    Code:
    .row {
        margin: 0 auto;
        max-width: 1140px;
        min-width: 755px;
        overflow: hidden;
        width: 100%;
    }
    If you remove that min-width then those borders will not go off the screen as they do now (of course you may have put that min-width in there for a reason so you need to check if anything else is affected).

    - Forms on Service & Parts -> Online Booking and Contact Us are too wide seems to go right too edge or further of the screen
    That seems to be the same issue as above with the min-width.

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    The min-width was a huge issue, never even realized that.

    The navigation menu, I can take a look at the link you supplied to work my way to solving it.

    Still having major issues with it on landscape mode, the slider still shows and it goes over the navigation. It almost seems like its not reading my media queries.

    The major issues though are on the Used Cars page and when you click on a Car Picture going into the single vehicle details.

    Thanks,

    Mike

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    T

    The major issues though are on the Used Cars page and when you click on a Car Picture going into the single vehicle details.

    Thanks,

    Mike
    Hi,

    It looks as though the tabs are not wrapping with the layout and overlapping other content.

    Try changing the display to inline-block and see what happens.

    Code:
    ul.tabs li {
        display: inline-block;
    }

    You are floating elements in some places but not containing them properly. make sure where you have a series of floats in a parent that has a background colour that you contain them. e.g. your random_inventory_items are floated but not contained.

    Code:
    .content:after{
    content:" ";
    clear:both;
    display:block;
    height:0;
    visibility:hidden;
    }
    .content{zoom:1.0}

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent,

    Got to work with the search fields on the Used Cars page but that shouldnt be too difficult and figure out some spacing issues looks like theres line right across Used Car Inventory and the sorting icons are over top the pictures. And got to solve the picture issue either by moving the title of the car below the picture and maybe making picture 100% width. Or just making the picture small, what would you recommend? That would be only fixes I can spot for the User Cars page.

    One you get into one of the single cars though still got some issues. Should I make the main picture full width and if so how can I add the thumbnails below it and info all below that. And I'll have to move all the information down (pictures and text) as it is too high cause goes over the checkered pattern. And still got issues with the tabs, not sure what I should do for the single pages with the tabs. Its getting there now though.

    The styles still also dont be applying for landscape view on a mobile when I rotate my phone everything becomes a mess.

    Thanks,

    Mike

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still trying to solve some of the issues on the mobile especially when flipping it to landscape mode then the car pages but pretty sure thats just some simple styling issues to make it look correctly for those pages.

    Thanks,

    Mike

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Sorry Mike, I've been away all day. I will have a look in the morning and see if I can help with the issue.

  11. #11
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Really appreciate the help, your the best!

  12. #12
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Good Morning Paul, just wanted to see if you had chance to take a peak at some of the issues with the responsive stuff on the site especially when flipping phone to landscape.

    Thanks,

    Mike

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Regarding the landscape problem then refer to these two articles which may offer fixes.

    http://webdesignerwall.com/tutorials...rt-scaling-bug
    https://github.com/PeterWooster/iOS-...tionchange-Fix

    You could also try changing the meta tag to:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Which seems to be the one recommended for best results.

    You'll have to point me to the page that is giving you the problem so I can try and test (I assume you are testing on an iphone). I believe ios4 had problems with landscape mode which has since been fixed in latest versions.

    For the single cars yo can make the cars go full width like this:

    Code:
    .car_main_photo_box {float:none;width:100%}
    
    .car_details_box{float:none;clear:both}
    .nohor{clear:both;width:auto!important}
    #main_thumb{
    width:100%;
    float:none;
    }
    #main_thumb img{max-width:100%;height:auto;float:none;}
    .car_detail_div{
    margin:0;
    padding-top:100px;
    height:auto;
    }
    The above are over-rides and should go in the media query for the smaller window width (around 750px).

    It's really a matter of going through each element and changing height and widths and floats to a more suitable arrangement for smaller widths. There is only so much you can do with an existing design because when you start from scratch you can arrange things to work better. You can't actually change html with media queries so you have to make the best of what you can do.

    You will have to point me to one issue at a time (with a link) as I get lost going back up and down the thread trying to work out where I am

  14. #14
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks yea the meta tag didnt seem to work.

    This is link where seeing trouble with landscape I'm on a Samsung Galaxy S3.

    Homepage

    http://fuzzypanda.ca/cardemon/

    When I go to landscape it still shows the slider, my header navigation is messed up somewhat and the footer is messed up, which is on all pages on landscape. Thats what I can notice there on this link...

    http://fuzzypanda.ca/cardemon/


    Used Car Inventory
    http://fuzzypanda.ca/cardemon/cars-for-sale

    How can I just have the Picture up top then the title below it, cause right now the title goes over top of the picture. Ad my black divider border goes over top of the title Used Car Inventory so looks like I have to push content down more.

    Single Car

    http://fuzzypanda.ca/cardemon/cars-f...02-ford-cougar

    Only issue I'm seeing here now is the tabs anyway I can make it so they stack or something and dont flow offscreen.



    Also on Landscape for

    Service and Parts

    http://fuzzypanda.ca/cardemon/servic.../complete-care

    As mentioned, header and Navigation are messed up and the sub nav Complete Care, Online Booking and Shop Capabilities I'd like to stack like how I did on Portrait view for mobile devices.

    Basically if I can get all the styles for portrait view to work on landscape view thats what I really need to fix the landscape view then just couple minor issues with the Used Cars and Single Cars as mentioned above.

    Thanks man,

    Appreciate it huge.

    Mike

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You have the media query set to max-device width 768px and smartphones are 480px I believe (according to css tricks)

    You can try 480px and see if it works for your galaxy.

    However, you are going about this the wrong way in that you don't need to be concerned with device widths as such. You should target the viewport width and just change the design at the places where the design breaks. Desktops in most cases will need the smaller styles when the window is closed and makes the job a little easier overall.

    I would use something like this instead of device-width:

    Code:
    @media only screen and (max-width : 768px) { 
    
    rules for smaller windows... etc
    Then you can adjust for smaller when you see something breaking.

    e.g.

    Code:
    @media only screen and (max-width : 480px) { 
    
    more rules if needed...
    The main point being in that you only apply rules when you notice the layout looking odd or breaking. Just open and close the window until something breaks and then set a media query at that breakpoint and forget about devices. Just make the page scale from small to large and collect everything on the way.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Ad my black divider border goes over top of the title Used Car Inventory so looks like I have to push content down more.
    Just clear the float.
    Code:
    .sort{clear:both}

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    How can I just have the Picture up top then the title below it, cause right now the title goes over top of the picture.

    Basically the same as I said for the other picture.

    In the media query use this

    Code:
    .inventory_photo_box {
        height:auto;
        width: 100%;
    }
    .random_widget_image {
    max-width:100%;
    height:auto;
    }
    .inventory_img {
    float:none;
    height:auto;
    margin:0;
    width:auto;
    }
    As I said above if you use max-width instead of max-device-width you can test most things in the browser by just opening and closing

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    As mentioned, header and Navigation are messed up and the sub nav Complete Care, Online Booking and Shop Capabilities I'd like to stack like how I did on Portrait view for mobile devices.
    In that case why didn't you use the same styles as the other page rather than putting them in a separate css file not called on that page? The header styles are here in style.css:

    Code:
    .header {
        border-bottom: 10px solid #004964;
        height: 130px;
        position: relative;
        z-index: 998;
    }
    Those global styles should have been the ones altered in the media query for smaller widths.I would have done something like this in your media query:

    Code:
    .header {
        background: none;
        height: auto;
        width: 100%;
    padding-bottom:20px;
    }
    .header ul{padding-top:10px}
    .header li,.header li a{line-height:24px;height:auto}

  19. #19
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for all this, looks like everything is working except that one issue with the Used Car Inventory I put in the CSS to drop the title of the car down below it but it didn't seem to do it when testing on my Samsung everything else seems to work correctly now.

    Thanks,

    Mike

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I couldn't see the CSS I gave you above.

    Code:
    .inventory_photo_box {
        height:auto;
        width: 100%;
    }
    .random_widget_image {
    max-width:100%;
    height:auto;
    }
    .inventory_img {
    float:none;
    height:auto;
    margin:0;
    width:auto;
    }
    Where did you put it? It needs to be in that media query.

  21. #21
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I put it in the media query I just checked should be there, with the other styles.

    Its right after the...

    Code:
    .car_detail_div{
    	margin:0;
    	padding-top:100px;
    	height:auto;
    }
    		
    .inventory_photo_box {
        height:auto;
        width: 100%;
    }
    .random_widget_image {
    	max-width:100%;
    	height:auto;
    }
    .inventory_img {
    	float:none;
    	height:auto;
    	margin:0;
    	width:auto;
    }
    Thanks,

    Mike

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Ok I see the problem. You have another css file called car-demon.css which is called after the one with the media query and overwrites the rules I gave you.

    I suggest you stick another media query at the end of car-demon.css and move the styles that refer to that page from the other media query. It's probably only the rules I gave you above.

  23. #23
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect, works like a charm,

    I think last thing would be on a page for single car example...

    http://fuzzypanda.ca/cardemon/cars-f...02-ford-cougar

    Only a couple of the tabs show, then gets cut off how can I fix this so it shows two or three then other ones go down to next row etc.

    Thanks,

    Mike

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Only a couple of the tabs show, then gets cut off
    I would just remove the display: inline here (line 5)—
    Code:
    ul.tabs li {
    list-style: none;
    display: inline;
    }

  25. #25
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    602
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, got to find which CSS file that is in now lol.

    One other thing some of the ribbons on the cars on mobile seem to mess up and just be placed randomly when scrolling down on the Car Inventory, can I had that or get rid of it anyway?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •