I put it in the media query I just checked should be there, with the other styles.
Its right after the…
.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
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.
Perfect, works like a charm,
I think last thing would be on a page for single car example…
http://fuzzypanda.ca/cardemon/cars-for-sale/2002-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
I would just remove the display: inline here (line 5)—
ul.tabs li {
list-style: none;
[COLOR="#FF0000"]display: inline;[/COLOR]
}
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?
HI,
You can try fixing the position as now it is auto positioning.
Try:
.inventory_img{
position:relative;
}
#ribbon{top:0;left:0}
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.
It’s the display:inline and its line 5 in http://fuzzypanda.ca/cardemon/wp-content/themes/auto-one/css/car-demon-vin-query.css
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-sale/2010-bmw-335i-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
Go to the car-demon.css file at line 84 and add in the red bit below:
@media only screen and (max-width: 768px) {
.inventory_photo_box[COLOR="#FF0000"], .car_main_photo_box[/COLOR] {
height: auto;
width: 100%;
}
}
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-sale/2010-bmw-335i-xdrive-m-sport
Thanks guys.
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:
@media only screen and (max-width: 768px) {
.inventory_photo_box, .car_main_photo_box {
height: auto;
width: 100%[COLOR="#FF0000"] !important[/COLOR];
}
}
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).
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.
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.
It’s working for me. Try refreshing the page.
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
You haven’t contained your floats again.
.subnavbar:after{
content:".";
height:0;
clear:both;
display:block;
visibility:hidden;
}
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.
.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.
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.
#menu-primary-menu{padding:20px 0}
#menu-primary-menu li a{
height:auto;/* over-rides height*/
line-height:1.8;/* over-rides line-height*/
}