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.
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.
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.
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.