Mobile site not rendering right

I once again come here for help. 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-Wood-Single-Bar-Wall-Mount-Ballet-Barre-System-Fixed-Height_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?

Hi there cowsgonemadd3,

your page has numerous coding errors
that may be the cause of problems. :mask:

So start by rectifying them…

your page’s coding errors

coothead

1 Like

I did not know that tool existed. I will review these errors. Looks like I have quite a few. The question is, which of these would make the top half of the site not render right while the bottom does? Many I see there don’t “need” fixing right away.

I wouldn’t worry about what error is causing what effect. The errors all need to be fixed. If you’re in a hurry then save the warnings till later but fix the errors one by one starting from the top.

2 Likes

Okay, I will get into my HTML files and start working :slight_smile:

2 Likes

You have set primary and secondary to have 50% and 45% widths respectively and the width for both should be auto at that point for mobile. It seems you are over-riding your media queries as the code in the cart css over-rides the responsive css.

<link rel="stylesheet" href="assets/templates/common-html5/css/responsive.css?vcart=7.2.3" type="text/css" media="screen" />
<link rel="StyleSheet" href="assets/templates/wavotion-html5/css/default_modified.css?vcart=7.2.3" type="text/css" media="screen" />

Try reversing those files although that may raise other issues as I didn’t look deeply into both.

1 Like

Ignore my dumb question. Just came back from lunch. Best get my head in gear haha

I could not even find my responsive.css earlier. Must have missed it. Might be how 3dcart sets it up to overide.

I went and found the responsive.css

I found this line of code at the top: @media only screen and (max-width: 767px) {

I should put auto instead of 767 max?

I could not find a 45% in the CSS that I thought was the setting for the content width. Unless I missed it.

It now works. It was a glitch with the CSS settings contradicting each other. I modified the defaultmodifiedcss and now it works.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.