SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 39 of 39
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You can try fixing the position as now it is auto positioning.

    Try:

    Code:
    .inventory_img{
    position:relative;
    }
    #ribbon{top:0;left:0}

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

    Going to try that, still having trouble finding where abouts the tabs code is for the single cars to remove the inline block lol

    After that I believe its done then trying to solve the dropdown navigation. Since its two separate divs for each navigation is there a way to make it into all one dropdown menu for the mobile.

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Thanks Paul,

    Going to try that, still having trouble finding where abouts the tabs code is for the single cars to remove the inline block lol
    It's the display:inline and its line 5 in http://fuzzypanda.ca/cardemon/wp-con...-vin-query.css

  4. #29
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Excellent, I transferred site all over now but noticed that when you go to a single page on mobile devices the main picture does not go full width of the window heres example...

    http://auto-onecars.com/cars-for-sal...xdrive-m-sport

    If possible I'd like it to look like it does here on mobile in the Used Car Inventory it goes full width...

    http://auto-onecars.com/cars-for-sale

    And think only thing is I cant seem to move my search stuff in by 20px on mobile so its not so tight with the viewport.

    Thanks,

    Mike

  5. #30
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Go to the car-demon.css file at line 84 and add in the red bit below:

    Code:
    @media only screen and (max-width: 768px) {
    .inventory_photo_box, .car_main_photo_box {
    height: auto;
    width: 100%;
    }
    }

  6. #31
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but it still same size. Also, is there way to move the thumbnails up to below the main picture on the mobile so its above the content and info about the car.

    http://auto-onecars.com/cars-for-sal...xdrive-m-sport

    Thanks guys.

  7. #32
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Thanks, but it still same size.
    It depends on where you put it in the style sheet. Generally, it's safer to put @media rules after the desktop ones. Anyhow, you could force the issue by adding !important:

    Code:
    @media only screen and (max-width: 768px) {
    .inventory_photo_box, .car_main_photo_box {
    height: auto;
    width: 100% !important;
    }
    }
    Also, is there way to move the thumbnails up to below the main picture on the mobile so its above the content and info about the car.
    Not unless you hide the information between the thumbnails and the image, which is not a good idea. You could change the display of that information so that it's not stacked like currently, which would bring the thumbnails closer. But you can't change the order of the HTML (well, not yet, anyway, though CSS3 is working on that).

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

    Strange it still didn't work adding !important to it. I figured that would change it for sure.

    Ok guess I'll just keep thumbnails where they are.

  9. #34
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    It looks like you've done a very good job of it @mbond5 ; well done!

    Have you considered something like this for your navigation; http://tinynav.viljamis.com

    Might be worth a shot when you're up to it.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  10. #35
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Strange it still didn't work adding !important to it.
    It's working for me. Try refreshing the page.

  11. #36
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    675
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect!!! Had to refresh several times but now it works.

    Sega thanks for that I'm going to look into it.

    Only issue with that is that can I use it to combine both menus into one menu? This would be ideal if possible is having a dropdown menu on the mobile with both menus inside it. Hope that makes sense lol.

    Oh also, noticed little issues that I can seem to solve even adding padding bottom to it on the media queries pages...

    http://auto-onecars.com/service-parts/complete-care - The text is way to close to the subnav (blue links) - seems to be issue with most pages
    http://auto-onecars.com/category/blog - Same thing here the 5px border should be pushed down quite a bit more then the blog link - need more spacing between the Toolbox Blog and the 5px solid line
    http://auto-onecars.com/test-two/328 - The 5px border line should be below the title Test Two quite a ways down similar to the desktop version

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post

    http://auto-onecars.com/service-parts/complete-care - The text is way to close to the subnav (blue links) - seems to be issue with most pages
    You haven't contained your floats again.
    Code:
    .subnavbar:after{
    content:".";
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
    }

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    http://auto-onecars.com/test-two/328 - The 5px border line should be below the title Test Two quite a ways down similar to the desktop version
    Similar thing and I believe we have already covered this issue a few hundred posts back

    You are floating the heading at 100% width and therefore the border and padding of any elements below will slide under the float to the top of the containing block unless you have cleared them.

    Code:
    .content{clear:both}
    Of course you may be using .content in places where you don't want to clear floats so either use a new class or check your usage to see if its ok to clear on .content.

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    On the desktop (at some widths) your menu wraps below the blue line because you have used a massive height and line-height. Just us some top padding instead.

    Code:
    #menu-primary-menu{padding:20px 0}
    #menu-primary-menu li a{
    height:auto;/* over-rides height*/
    line-height:1.8;/* over-rides line-height*/
    }


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
  •