Home Forums Weaver Xtreme Theme images not resizing in IE 11

Topic Resolution: Answered

This topic contains 13 replies, has 2 voices, and was last updated by  dskirk 6 days, 13 hours ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #57979
    Answered

    dskirk
    Participant

    Hello, I am running Win 7 Pro and Xtreme 4.2.2. My website is https://davidkirk.org/cicnew/  I have two problems where I hope you can assist.

    The home page has six images in a row, all done with a simple table. The images act responsively when the browser window is changed, as desired, when using Firefox, Chrome, or Opera. But with IE 11, the images remain fixed size and are not responsive. I am hoping you can provide a fix or CSS or whatever will fix that. I haven’t been able to test with Edge browser, since I’m still at Win 7.

    My other issue relates to the same six images. On the browsers where they act responsively, the space between the images changes disproportionately, causing proportional space between images in increase significantly, leaving the images very small. That is most evident on smartphone. Is there a way to keep the images and space beteen more proportional when resizing the window so that the images don’t end up so small? I will sinceely appreciate any tips on that. Thank you.

    david

    #57981

    scrambler
    Moderator

    It works as is in Edge,

    For IE11, add the CSS  width:100% to each image.

    You can do that inline to the image HTML, or you could add the rule below in the theme Global Custom CSS Rule box

    .otw-sidebar-6 table img {width:100%;}

    you may have to add padding to your table cells to compensate for the slight increase in size

     

    #57982

    dskirk
    Participant

    Wow! That fixed the IE 11 issue quickly. Thanks so much, Scrambler.

    Would you have any tips on the other question, keeping the space between images from growing disproportionately? In smartphone view, the space between images is almost as wide as the images themselves. Any suggestions are welcome. Thank you.

    david

    #57983

    scrambler
    Moderator

    I am not seeing what you are describing.

    For me, as I reduce the browser size, the space between image is the same between all images.

    But if you want the space between images to become smaller as the browser gets smaller, so that images are bigger, use a % instead of an em value for the padding of your table cells.

    right now you have

    padding:.4375em

    try something like

    padding:1%

     

    #57985

    dskirk
    Participant

    Darn. It is unfortunate that somehow your browser is showing differently, as I was hoping you would see what I see in each of my browsers. Thank you for the padding suggestion, but all I could see was that it separated the images more in larger view, but had no impact as the screen became smaller. I have tried using CSS instead of a table, but I haven’t been succesful there (my lack of good CSS knowledge is the blame there, but I will try again). I do appreciate your attempt to help. Again thank you.

    david

    #57987

    scrambler
    Moderator

    What browser are you seeing the issue on, can you grad a picture of the screen?

    Also, set the % to whatever value gives you the right space on a large browser and let it scale down on smaller ones

    #57988

    scrambler
    Moderator

    As for using divs instead of table (which would be best), there are some pointers in the article below

    https://guide.weavertheme.com/responsive-columns-and-widgets/

    But given you only have one row of 6 images, why don’t you use a WordPress gallery set to 6 columns

    #57989

    dskirk
    Participant

    I am including a link on how the row of images appears in Firefox –

    Your suggestion on a gallery would be  quick fix, but I have mouseovers on all of this and that messes it up. However, the gold mine you opened to me was the weavertheme link on setting up the icons with CSS. That will be my strategy and will ultimately be my best solution, I’m sure. A big THANKS for that.

    david

    #57990
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    Using the % would fix your space issue.

    If wanting to change the Padding value only on mobile you could use the rule

    .is-mobile .otw-sidebar-6 table td {padding:.5%;}

    To go the HTML CSS way instead of tables, extrapolating the HTML and CSS give for 4 columns, here is the HTML and CSS for 6

    <div>
    <div class="content-6-col">Put your first column stuff here.</div>
    <div class="content-6-col">Put your second column stuff here.</div>
    <div class="content-6-col">Put your third column content here.</div>
    <div class="content-6-col">Put your fourth column content here.</div>
    <div class="content-6-col">Put your fifth column content here.</div>
    <div class="content-6-col">Put your six column content here.</div>
    </div>
    <div class="clear-cols"></div>

     

    CSS

    /*-style for 6 columns on desktop and mobile*/
    .content-6-col {float:left;width:16.66%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    /*-sets the line breaks*/
    :nth-of-type(6n+1).content-6-col {clear:left;}
    #58003

    dskirk
    Participant

    Scrambler,

    Thanks for the tip, but once I saw that I could use bootstrap-style CSS (thanks to you), I prefer to allow the icons to split to fewer columns and keep large size. This is ideal for smartphone users, although I may use your code if user prefers to keep on one line. My code is below, although I admit I don’t fully understand it and may have unnecessary code there – but it works:

    /*-style for 6 ### columns on desktop*/
    .content-6-col {float:left;width:16.66%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    /*-Change to 2 columns on small tablets*/
    .is-smalltablet .content-6-col {width:50%;}
    /*-Change to 1 columns on Phones*/
    .is-phone .content-6-col {width:100%;}
    /*-sets the line breaks*/
    :nth-of-type(6n+1).content-6-col {clear:left;}
    .is-smalltablet :nth-of-type(6n+1).content-6-col {clear:none;}
    .is-smalltablet :nth-of-type(2n+1).content-6-col {clear:left;}

    Your help has been superb. IE 11 problem fixed and you opened the door to help me set itons much better. Thanks so much.

    david

    #58008

    scrambler
    Moderator

    If you do want the reduced number of columns, then your Added CSS will do that.

    If you want a different split and need help with the CSS let me know.

    The last set of rules is to force the new line (when more than one), for small tablets you need to undo the first rule with clear:none, then set the new one for 2 columns

    #58016

    dskirk
    Participant

    The reduced number is what I had always wanted, but saw no solution until your help. The icons link to services provided and our site (this is just the sandbox for it) is mostly visited by smartphones. I’m very pleased at the result for phones.  I set the CSS for 3 columns for landscape smartphone and small tablet (Shown below), but I do not understand your last paragraph. I will appreciate if you take a look at site now and advise of any specific CSS. To my eye, it looks good, but you have more expertise. Thanks for your assistance.

    david

    /*-Change to 3 columns on small tablets*/
    .is-smalltablet .content-6-col {width:33%;}
    /*-Change to 1 columns on Phones*/
    .is-phone .content-6-col {width:100%;}
    /*-sets the line breaks*/
    :nth-of-type(6n+1).content-6-col {clear:left;}
    .is-smalltablet :nth-of-type(6n+1).content-6-col {clear:none;}
    .is-smalltablet :nth-of-type(3n+1).content-6-col {clear:left;}

     

    #58017

    scrambler
    Moderator

    The last paragraph forces a new line

    When you have 6 columns, each container with the number 6n+1 is a new line (1,7,13,19…) This is done with the CSS below
    :nth-of-type(6n+1).content-6-col {clear:left;}

    When the number of columns changes, like 3 columns on small tablets, we must undo the rule above with the one below
    .is-smalltablet :nth-of-type(6n+1).content-6-col {clear:none;}

    Then put in a new rule to force a new line on each container with the number 3n+1 (1,4,7,10…)
    :nth-of-type(3n+1).content-6-col {clear:left;}

    Now, I think you may want 2 columns on phones and 4 on small tablets, to do that, the CSS would be

    /*-Change to 4 columns on small tablets*/
    .is-smalltablet .content-6-col {width:25%;}
    /*-Change to 2 columns on Phones*/
    .is-phone .content-6-col {width:50%;}
    /*-sets the line breaks*/
    :nth-of-type(6n+1).content-6-col {clear:left;}
    .is-smalltablet :nth-of-type(6n+1).content-6-col {clear:none;}
    .is-smalltablet :nth-of-type(4n+1).content-6-col {clear:left;}
    .is-phone :nth-of-type(4n+1).content-6-col {clear:none;}
    .is-phone :nth-of-type(2n+1).content-6-col {clear:left;}

    #58020

    dskirk
    Participant

    You are a WIZARD! Much thanks for all you’ve done. Thanks for the suggestion to use 2 columns for phone. Looks better and more phone-friendly. Xtreme is my number one theme and support is over the top. Thank you, thank you.

    david

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.