Naming the labels

Hi Phet Maly, I saw your site in another post and I loved how you did lay out the list of vehicles. I am working on one site, but I am having issues with the proper layout – the text goes up to the top interfering with navigation menu? I don’t know why prices don’t want to load making the “view details” too far down, and text under photo is almost overlapping with the photo (that also looks really squeezed). Would you mind giving some tips? I would be very very grateful. Thanks!

@magpiwo

Sure, I could take a look do you have a link where I could check your page out?

thank you so much. here is the link: https://www.beyondautosale.com/cars-for-sale

The link doesn’t seem to be working…

something has happened to my site and all the content got wiped out. I am working with my hosting provider and hopefully will fix the issue shortly.

OUCH… No backup?

hello,
all set and working, please click the link now. thank you

Still doesn’t seem to be working…!

sorry, the wrong link. try this:
https://www.beyondautosales.com/cars-for-sale

the other thing I can’t figure out is titles ” great deal” and “search inventory” are moved to the left and not aligned with the content on the bottom.

Have you installed the plugin Car Demon Style? I’ve achieved my layout by starting with the style Responsive, offered in this plugin. This was my starting point.

You will have to fiddle with your CSS too.

I am having issues with the proper layout – the text goes up to the top interfering with navigation menu?

In your custom css, you should add a margin-top to your #main div. Currently, it is set to 0px.
Something like this: #main {margin-top: 30px;}

I don’t know why prices don’t want to load making the “view details” too far down, and text under photo is almost overlapping with the photo (that also looks really squeezed)

This is still a CSS issue. You will have to tweak these type of details. Along the lines of this :
.random_img.inventory_img {margin-top: 15px; margin-bottom: 15px;}
.inventory_price_box {height: auto !important; margin-bottom: 16px !important;}

the other thing I can’t figure out is titles ” great deal” and “search inventory” are moved to the left and not aligned with the content on the bottom.

Try this in your custom CSS:
#car_demon_random_car-widget-2 .widget-title {margin-left: 10px !important;}
#car_demon_search_car-widget-2 {width: auto !important;}

Car Demon is a very good plugin, but you need to tweak it a lot for it to fit with the theme you are using. It is not “out of the box” with all themes. I’m not a super duper coder, but I know my way with CSS so Car Demon is a good fit for me.

Hope this helps!

Thank you so very much for your help! I absolutely appreciate it! It did help to fix almost all the issues I had! I did install the Car Demon Style and for some reason when I change the style, i don’t see any changes. I don’t know if there is anything that need to be enabled or it seems not to be working with my template?

Actually, there is an option you should look at.

– In your WP backend menu, go to Cars for sales > Car Demon Settings.
– Look for “Use included theme files?“.
– This option should be set to “No”. “Car Demon Styles” will then be able to “Override” the default CSS.

The only thing I wasn’t able to figure out yet is how to make your own separate Style that could be integrated into “Car Demon Styles”. On my site, I’ve heavily tweaked stuff directly in the php files. If theres an update, all of that goes bye bye!

I try to make changes by putting code in css editor. I am not incredibly skilled in css just working my way around it. Your suggestion helped and i tried different layout and responsive works best for site and mobile. What were your experinces with mobile site? I am trying wptouch plugin but it’s hard to get the layout perfect.

I have figured changing of css, thank you so much for your help! Just have a few more questions:
1. How do I change the property of the search button in right ‘search inventory’ widget? I want the font “search” to be say black and remove that plus sign here: https://www.beyondautosales.com/ no commends seems to work.
2. I am trying to move ‘Quick Search; higher and towards left, but none of the padding comments work. I can move it towards right with padding-left: say3-px, but why decrease commands (padding-left: -30px) desn’t work?

thank you again for your help!