Mobile site not rendering right on sales pages

[vita-vibe]

I have sat here for a quite a while trying to figure out why my mobile site is not rendering right. The top half of my product pages is all pushed towards the left and set to only display a few lines of text before it jumps to the next line. Like this example: This is the text
that I am trying
to display but
I can only display
it like this.
Further down my page, in the description, the text is wide and set up normally. I am no coder. I am learning a lot
but can't figure this one out.
One of our biggest problems is the drop down box is very tiny. I tried to find the "txtboxstyle name option-13-12" in my html and css to no avail. Then I got to thinking that since the drop down box is up top, it is likely small because the rest of the top half of the product page is small.
Take a look at one of our product pages. http://www.vitavibe.com/Traditional-...ight_p_12.html
The image is super small, non clickable to enlarge and set to the left side. The same goes for all of the text. It is like the top half of the page thinks it is rendering for a very small screen.
What could be wrong here do you think?

[vita-vibe]

The template is wavoation-html5
I can not seem to figure out where the settings are that control the mobile website. I looked for a responsive.css or such but found nothing.

[thecartdesigner]

vita-vibe So there are few things right off hand that were not modified properly.

1. The top of the listing page as 2 main css areas: "Primary" and "Secondary". When you made these columns width:50% and width 45% in your default_modified.css file you never created a rule to change those widths in responsive sizes witch causes them to remain the 50% and 45% parameters and in turn why they are remaining small. Add this rule to UNDER your media 767px call

#listing0 .primary, #listing0 .secondary {
width: 100%;
}

2. Your main image needs to be supported a bit more to scale at different widths. Add this to your default_modifed.css:

#listing0 .main-image img {
width: 100%;
}


This should at least get you back to a better layout. Hope this helps

Shaun

[vita-vibe]

I added that to the DEFAULT CSS not the modified one and it messed the site up. This: #listing0 .primary, #listing0 .secondary {
width: 100%;
}

Add it only to the defaultmodified?

[vita-vibe]

I added it to "responsive.css" and it messed up.

[vita-vibe]

I added it to the right area and now it works! However, the "#listing0 .main-image img {
width: 100%;
}"

Thing did not seem to change the image quality any.

[thecartdesigner]

DO NOT MODIFY THE RESPONSIVE.CSS or LAYOUT.CSS These are set on the system side and will only auto from 3dcart update properly if you leave them that way. You can overwrite any rule by using duplicate rules in your default_modified.css

You need to the listing0 .main-image rule above the responsive styles. It is not a responsive functional rule. Move it above and it will work without issue

[vita-vibe]

I think it works nicely now. Thanks so much!

[thecartdesigner]

You are very welcome. Glad I could help