Announcement

Collapse
No announcement yet.

Would like to make MY images Re-Size responsively, like the ones on the SFNT page

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

    Would like to make MY images Re-Size responsively, like the ones on the SFNT page

    Hiya!
    ..
    I've tried regular methods of getting my .jpgs to "scale down in proportion" as the view gets smaller, but
    none of them have worked.
    ..
    Normally I add
    style="max-width: 100%; height: auto;" to the IMG tag and the images smoothly shrink
    maintaining their aspect ratio.
    ..
    In fact, I did a full stand-alone regular HTML page of them independent of the Site's ReadyTheme.
    All images shrunk down smoothly as the browser was minimized and re-sized.
    ..
    But when I take that
    code and paste it into a Readytheme "Content" Item. . . and place that where i need it,
    it suddenly won't re-size the images. They stay locked at full width and height.
    ..
    I also tried placing the code directly into the template without using the "<mvt:item. . ." at all.
    'Also tried removing every .jpg from the Div containers entirely.
    ..
    I Know it's possible to achieve because I see it work with the "Hero" image and other images on
    the SFNT page. I know I've been looking in the wrong places for the key to this 'cause it has been
    weeks and I'm not finding anything that works. Can someone point me to the spot in the manual I missed?
    ( Yes . . . there's good reason I post in the Beginner's support group. )
    Thanks MUCH in Advance!

    #2
    Re: Would like to make MY images Re-Size responsively, like the ones on the SFNT page

    If you are using a Bootstrap framework and the section is not setup for responsive images, you can use the img-responsive class. Otherwise, the CSS to accomplish this is:


    .img-responsive {
    max-width:100% !important;
    height:auto;
    display:block;
    }
    Hope this helps,

    Jamie
    Jamie Donaldson
    JSDVS Web Design / Development
    Web Design | Web Development | E-commerce Design & Integration

    Comment


      #3
      Re: Would like to make MY images Re-Size responsively, like the ones on the SFNT page

      'will reply fast so that i'm not logged out of the forums while typing this again.

      discovered today:

      category pages enable or "allow" responsive styling code to work.

      pages that are added NEW default to PREVENTING that same code from working.

      Examples:
      A Category page with images that Re-size perfectly:
      http://www.homesurplus.com/mm5/merch..._Code=KITCHENS

      A page I added with the " Plus" sign under pages in the Catalog . . :
      http://www.homesurplus.com/mm5/merch...s&Screen=WHTSN

      Finding this out eventually over the course of a few weeks is BEYOND infuriating.
      ..
      I now need to discover what's missing from the New page that is included in the
      category page. . . .

      Comment


        #4
        Re: Would like to make MY images Re-Size responsively, like the ones on the SFNT page

        <img src="graphics/00000001/large_link_shaker_white.jpg" title="Shaker White Kitchen" alt="Shaker White Kitchen" style="border: 0px solid ; max-width: 100%; height: auto;">
        Look at the style on the image above. It is an inline style with the max-width and height like the css I posted earlier. I don't ever recommend inline styles like you have on that image...the css file is a much cleaner way to go. Your pages are loaded within inline styles that need cleaned up and inserted into the css file.

        So...I am thinking it could possibly be your code...and thinking on that line. Start your new page over. Delete all of the code you have in that new page. Then, go to the CTGY page template and copy that code, and insert it into that new page. Then, go to the CTGY page template and write down all assigned items and assign the same into your new page. Ditto with header/footer. Then, insert your images again. That should straighten things out if it is in the code of your new page.

        If that doesn't work, I believe in the global header there is a conditional that allows formatting/etc on certain pages. If you find a conditional with multiple page codes listed, add in the code of the new page, and test your new page again.

        Hope this helps you,

        Jamie
        Last edited by jsdva; 09-03-15, 02:13 PM. Reason: added info
        Jamie Donaldson
        JSDVS Web Design / Development
        Web Design | Web Development | E-commerce Design & Integration

        Comment


          #5
          Re: Would like to make MY images Re-Size responsively, like the ones on the SFNT page

          ". . . go to the CTGY page template and copy that code, and insert it into that new page..."
          ". . .write down all assigned items and assign the same into your new page. . ."


          That did the trick.
          Thank You!! :)

          Comment


            #6
            Re: Would like to make MY images Re-Size responsively, like the ones on the SFNT page

            Originally posted by markhomesurplus View Post
            ". . . go to the CTGY page template and copy that code, and insert it into that new page..."
            ". . .write down all assigned items and assign the same into your new page. . ."


            That did the trick.
            Thank You!! :)
            Excellent! Glad you got it!

            Jamie
            Jamie Donaldson
            JSDVS Web Design / Development
            Web Design | Web Development | E-commerce Design & Integration

            Comment

            Working...
            X