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
I’ve started playing around with it and running into some issues. Below is list of what I can tell right now…
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
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.
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
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 [URL=“https://learnable.com/courses/responsive-web-design-in-action-2765”]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:
.row {
margin: 0 auto;
max-width: 1140px;
[B] min-width: 755px;[/B]
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).
That seems to be the same issue as above with the min-width.
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
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.
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.
.content:after{
content:" ";
clear:both;
display:block;
height:0;
visibility:hidden;
}
.content{zoom:1.0}
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
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
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.
Thanks Paul,
Really appreciate the help, your the best!
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
Hi,
Regarding the landscape problem then refer to these two articles which may offer fixes.
You could also try changing the meta tag to:
<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:
.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 
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-for-sale/2002-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/service-parts/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
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:
@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.
@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.
Just clear the float.
.sort{clear:both}
Basically the same as I said for the other picture.
In the media query use this
.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
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:
.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:
.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}
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
I couldn’t see the CSS I gave you above.
.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.