Announcement

Collapse
No announcement yet.

responsive CSS

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

  • responsive CSS

    I added in some custom coding to the site via CSS, and have the accompanying class and id tags, and it all works on my non responsive theme just fine.

    But when I put it to the new responsive theme it doesn't show up on the large desktop size, but when the site re-sizes to any other size below that it works just fine.

    What am I missing? Why does my custom CSS work on any size but the full size?

    As you can tell I am new to the responsive theme world.

    Thanks again for the help!

  • #2
    If you have css not showing until after you are in a responsive size you would have accidentally put your css within a css "media" call like so:

    @media screen and (max-width:360px) <--calls the size in which the css included is active {
    .class {rule: cool;}
    }

    Just make sure your css is not within a media rule that specifies size
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      I believe that is it! I had to scroll up quite a bit to find the tag. Thanks!!!

      Comment


      • #4
        running in to a new problem, some of the images I put in are resizing to 100% when it shrinks down. I put in size in the img tag and in the CSS and tried resize: none, yet the img stretches like a mad man.

        Any ideas?

        Welcome to Paleo on the Go LLC - Real Food Delivered is the link

        Comment


        • #5
          Get rid of the "resize:none;" all together it is not supported across all browsers.

          Here is what you should do for example

          img.howto-image {
          float: left;
          height: auto; <--CHANGE TO
          resize:none; <--REMOVE
          max-width: 50px; <--ADD
          width: 100%; <--CHANGE TO
          }

          This should help

          Edit: In regards to adding size to the img.

          When adding size to an image you want to do it in a different manner now that your template is html5. You want to stick to css properties. So you will want to get rid of the height="#" and width="#" in the img string.

          If you absolutely feel you have to do it inline, do it with inline style like so:

          <img style="height:50px; width:50px;" src="image/path.jpg" alt="yadayada"/>


          The other issue is that you should avoid using tables and learn to use divs with classes in place of the tables for more control and better all around usability.
          Last edited by thecartdesigner; 01-28-2015, 12:25 PM.
          TheCartDesigner.com
          Not 3dcart Owned or Operated
          100% Independent 3dcart Expert


          Follow Us on Twitter

          Comment

          Working...
          X