Announcement

Collapse
No announcement yet.

Mobile site not rendering right on sales pages

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Mobile site not rendering right on sales pages

    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?

  • #2
    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.

    Comment


    • #3
      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
      TheCartDesigner.com
      Not 3dcart Owned or Operated
      100% Independent 3dcart Expert


      Follow Us on Twitter

      Comment


      • #4
        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?

        Comment


        • #5
          I added it to "responsive.css" and it messed up.

          Comment


          • #6
            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.

            Comment


            • #7
              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

              TheCartDesigner.com
              Not 3dcart Owned or Operated
              100% Independent 3dcart Expert


              Follow Us on Twitter

              Comment


              • #8
                I think it works nicely now. Thanks so much!

                Comment


                • #9
                  You are very welcome. Glad I could help
                  TheCartDesigner.com
                  Not 3dcart Owned or Operated
                  100% Independent 3dcart Expert


                  Follow Us on Twitter

                  Comment

                  Working...
                  X