Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #837665

    This is only a problem on the PC in Explorer and Firefox (Chrome is okay on the PC, and all browsers work okay on the Mac). It used to work just fine.

    It seems that the images in the blog ( https://visualimpactsystems.com/blog/ ) and on a 2-column page that has search, posts, comments, archives, categories, and meta off to the right side ( https://visualimpactsystems.com/pro-bono-work/ ) do not ‘constrain’ themselves to the width of the left column, but render too wide and go on top of the right side column.

    Any suggestions?

    Mark Besh
    Visual IMPACT!

    #839569

    Hey mbesh,

    I just loaded your page and I can see all o the pages load just fine.
    Can you please clear your cache?

    Best regards,
    Basilis

    #839925

    Basilis,

    Cleared the cache, and it didn’t change for me. This is what it looks like in Explorer 11:
    http://visualimpactsystems.com/VisualImpact-Blog-Explorer11.png

    Note: I also viewed it on two other computers at a business next door (which never viewed our site), and they had the same problem (with Explorer 11).

    Reminder: This is only a problem on the PC in Explorer (v11) and Firefox (v35), and is okay in Chrome on the PC (v60) and in all browsers on the Mac.

    Thanks for your efforts.

    Mark Besh
    Visual Impact Systems

    #842223

    Hi,

    Please try adding this code to the Quick CSS section under Angular > Styling or to your child theme’s style.css file:

    .firefox img, .msie img { width: 100%; }
    

    Best regards,
    Yigit

    • This reply was modified 3 months ago by  Yigit.
    #842697

    Yigit,

    Put the code into the custom.css file (one entry from the bottom) and it doesn’t fix it.

    When you click on the link (in the footer) to go to the Blog page, the first blog post starts to show up and the image is the proper width. But, when the ‘sidebar’ renders, the image expands to almost twice the proper width going on top of the sidebar. Resizing the width of the browser window does nothing to the size of the image. (It’s not responsive).

    Another issue with this: When this code is active, the ‘icons’ in the Social Media plugin became huge (on the home page in the bottom right), and the pics next to the 4 ‘columns’ near the bottom of the home page (“Our Products”, “Our Sevices”, etc.) became huge.

    Any other suggestions?

    Thanks,
    Mark

    • This reply was modified 3 months ago by  mbesh.
    #844267

    Hi,

    Please try the following css codes.

    .chrome60 img, .msie img, .firefox img { 
       width: 100% !important;
       max-width: 100% !important;
    }

    Best regards,
    Ismael

    #844351

    Hi,
    I was unable to reproduce in Edge or IE11 or Firefox, please see screenshots in Private Content area.
    Was this solved with Ismael’s code? or are you still having this issue?
    Have you tried disabling your browser extensions such as Norton?

    Best regards,
    Mike

    #844844

    Mike/Ismael,

    Hmmm. When I started this issue, my IE11 (11.0.9600.17501) and a company next door’s IE11 both did this:
    http://visualimpactsystems.com/VisualImpact-Blog-Explorer11.png
    (and it still does). But when I updated my Firefox to 55.0.3, everything worked okay.

    I updated our IE11 to the “latest” available for Windows 7 from Microsoft, and it still was the same version (We try to make our web site compatible with Windows 7, since it still has an installed base of 50% on PCs).

    Ishmael’s code did fix the width of the images in the blog to the proper width, but then made the images in the Social Media plugin (latest version) and the images next to the text blocks on the home page (the images should be /15 the size), now on both PC and Mac (all browsers).

    http://visualimpactsystems.com/ImagesTooLarge-Chrome-Mac.jpg
    http://visualimpactsystems.com/SocialMediaImagesTooLarge-Chrome-Mac.jpg

    [ Note: I used http://netrenderer.com/ for IE11, and it showed the same issue for the blog page ( https://visualimpactsystems.com/blog/ ). My public library also had version 11.0.9600… and it had the same issue ].

    Suggestions?
    Mark

    • This reply was modified 2 months, 3 weeks ago by  mbesh.
    #845215

    Hi,

    Ishmael’s code did fix the width of the images in the blog to the proper width, but then made the images in the Social Media plugin (latest version) and the images next to the text blocks on the home page (the images should be /15 the size), now on both PC and Mac (all browsers).

    Please inspect the element and try to use a much more specific selector for the blog images.

    Best regards,
    Ismael

    #845314

    Ishmael,

    I don’t know how to do that. Can you give me some insight into it?

    Mark

    #845669

    Hi,

    Please replace the css code with the following.

    .chrome60 .entry-content img, .msie .entry-content img, .firefox .entry-content img { 
       width: 100% !important;
       max-width: 100% !important;
    }

    Best regards,
    Ismael

    #845843

    Ishmael,

    Thank you for being so helpful and patient on this, but that code doesn’t work.

    So, I put in just this:

    .msie .entry-content img {
    width: 100% !important;
    max-width: 100% !important;
    }

    It does not make the images on the blog the proper size (they are still too wide), but it does not ‘mess up’ the ‘4 column’ images on the home page and the Social Media plugin images in all the other browsers.

    Is there a way to specifically ‘target’ only the “Blog” and the “Pro Bono” pages and its images?

    Thanks,
    Mark

    #846720

    Hi,

    Please try the following css code instead.

    .msie .template-blog img, .firefox .template-blog img, .msie .page-id-3486 .template-page img, .firefox .page-id-3486 .template-page img { 
       width: 100% !important;
       max-width: 100% !important;
    }

    Best regards,
    Ismael

    #846904

    Ismael,
    For whatever reason, I had to remove the Firefox so that Chrome would properly render the Social Media plugin icons, and the 4 images in the columns on the home page (? Hmmm).

    IE11 still does not render the images on the “Blog” and “Pro Bono” pages the proper width.

    Below is the code that is in there now. I have it just below the last entry in the CSS. Should I move it to somewhere else?

    . . .
    .msie .template-blog img, .msie .page-id-3486 .template-page img, {
    width: 100% !important;
    max-width: 100% !important;
    }

    @media only screen and (min-width: 989px) {
    .portfolio-sort-container .no_margin.one_fourth {
    width: 24.98% !important;
    }}

    Thanks for all your efforts on this!

    Mark

    #847567

    Hi,

    Please add the new css code again. The home page should not be affected because we added the id of the “pro-bono” page. Make sure that you’re not looking on a cached version of the page.

    Best regards,
    Ismael

    #850539

    Ismael,

    I cleared the cache many times, and even reinstalled a ‘new’ IE 11 on my PC—and it still has the problem:
    http://visualimpactsystems.com/VisualImpact-Blog-Explorer11.png

    This code is ‘live’:
    .msie .entry-content img {
    width: 100% !important;
    max-width: 100% !important;
    }

    (“Firefox” code was removed since it ‘enlarges’ the Social Media Plugin icons and the 4 images in the 4 columns on the Home Page in all browsers and on both PCs and Macs).
    http://visualimpactsystems.com/ImagesTooLarge-Chrome-Mac.jpg
    http://visualimpactsystems.com/SocialMediaImagesTooLarge-Chrome-Mac.jpg

    I tested IE 11 on a variety of different computer in the past week (both Windows 7 and Windows 10), and it still has the problem.
    [ Note: It works fine in the Microsoft Edge browser ].

    Any suggestions?

    Thanks for all your effort in this!

    Mark

    #850844

    Hi,

    Try to be more specific with the selector. Insert the “.entry-content” selector so that it won’t affect the sidebar or the social media images.

    Best regards,
    Ismael

    #850996

    Ismael,

    I am a “designer” and not a “programmer,” so I will need your help in writing the proper code. But, isn’t the “.entry-content” selector already in there?:

    .msie .entry-content img {
    width: 100% !important;
    max-width: 100% !important;
    }

    Mark

    #851098

    Hi Mark,

    Try the code like this. Here is the code you can put in Quick Css,  if it does not work, put into themes/angular/css/custom.css

    
    .msie .entry-content img.size-full {
        width: 100% !important;
        max-width: 100% !important;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #851163

    Victoria,

    Thank you for trying to help, but by using your code, IE 11 is still not rendering the image the proper width (still too wide).

    Q: Ishmael suggested code to address the specific pages a while back, so I tried the following—but to no avail:

    ==================================
    .msie .entry-content img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    .msie .template-blog img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    .msie .page-id-3486 .template-page img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    Then I tried:
    ==================================
    .msie .template-blog img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    .msie .page-id-3486 .template-page img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }
    ==================================

    Neither of these worked. (This second one is “live” now).

    Just in case, below is the entire custom.css file, so you can see if there are some improper ‘interactions’ with other code:

    /* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

    #js_sort_items {
    font-size: 14px;
    }

    #top .template-dynamic .callout {
    padding: 4px 0 0px;
    }

    #top .template-dynamic .callout p {
    padding-bottom: 0;
    }

    #top .mobileMenu {
    display: none !important;
    }

    #top h1.ajax-portfolio-title {
    font-size: 2.3em;
    }

    .ajax-portfolio-response {
    z-index: 2;
    }

    @media only screen and (max-width: 767px) {
    .main_menu ul .sub-menu {
    visibility: none;
    opacity:0;
    display:block;
    }

    .js_active .main_menu ul{display: block !important;}

    #top .primary-background, .info_text_header, #info_text_header .infotext {
    background-color: #c20024 !important;
    }

    .ajax-portfolio-response-wrapper {
    top: 40px;
    }}

    #top .portfolio-title {
    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif; font-size: 14px;
    }

    .logo, .logo a {
    margin-top: -20px; float: left;
    }

    .phonenumber{
    color: #c20024; font-size: 24px; text-align: right;
    }

    .phonenumber, .phonenumber a {
    margin-top: -4px;
    }

    .anniversary {
    color: #d1d3d4; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: right;
    }

    .outer_callout.dynamic_el_1 {
    margin-top: 0;
    }

    .entry-content .gform_wrapper input {margin-bottom: 0 !important}

    .msie .template-blog img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    .msie .page-id-3486 .template-page img.size-full {
    width: 100% !important;
    max-width: 100% !important;
    }

    @media only screen and (min-width: 989px) {
    .portfolio-sort-container .no_margin.one_fourth {
    width: 24.98% !important;
    }}

    =======================

    I’m sorry that this is so ‘frustrating’, and I’m really appreciative of your and Ishmael’s help!

    Mark

    #851864

    Hi,

    Please post the login details here so that we can test the css codes.

    Best regards,
    Ismael

    #852033
    This reply has been marked as private.
    #852443

    Hi,

    Where did you add the css modifications? The Quick CSS field is empty.

    UPDATE: OK. It’s in the custom.css file. Please replace the css code with the following.

    .msie .template-blog .content img, .chrome60 .template-blog .content img, .msie .page-id-3486 .template-page.content img, .chrome60 .page-id-3486 .template-page.content img { 
       width: 100% !important;
       max-width: 100% !important;
    }
    
    

    Please make sure that you’re not looking on a cached version of the page.

    Best regards,
    Ismael

    #852526

    Ismael,

    The code did not fix the IE 11 problem, but it did not ‘mess up’ the Social Media plugin icons or the 4 pics on the Home Page in all the other browsers (like it did with previously similar code you suggested). So, I guess this is progress. [ FYI: I cleared ALL the items in the IE 11 history twice before trying to view anything ].

    Your code is ‘live’ (in the custom.css file) on the staging site:
    http://visualimpact.staging.wpengine.com/ (hosted on WPengine)

    Suggestions?

    Thank you all your effort!

    Mark

    #852815

    Hi,

    Please add this css code.

    .msie .content img, .msie .page-id-3486 .content img { 
       width: 100% !important;
       max-width: 100% !important;
    }

    Best regards,
    Ismael

    #854396

    Ismael,

    Thanks for being so patient on this. It still not working properly in IE 11 (works fine in all other browsers on PC and Mac).

    Problem pages:

    Our Blog

    Here’s what is in the custom.css (‘live’ now):

    /* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

    #js_sort_items {
    font-size: 14px;
    }

    #top .template-dynamic .callout {
    padding: 4px 0 0px;
    }

    #top .template-dynamic .callout p {
    padding-bottom: 0;
    }

    #top .mobileMenu {
    display: none !important;
    }

    #top h1.ajax-portfolio-title {
    font-size: 2.3em;
    }

    .ajax-portfolio-response {
    z-index: 2;
    }

    @media only screen and (max-width: 767px) {
    .main_menu ul .sub-menu {
    visibility: none;
    opacity:0;
    display:block;
    }

    .js_active .main_menu ul{display: block !important;}

    #top .primary-background, .info_text_header, #info_text_header .infotext {
    background-color: #c20024 !important;
    }

    .ajax-portfolio-response-wrapper {
    top: 40px;
    }}

    #top .portfolio-title {
    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif; font-size: 14px;
    }

    .logo, .logo a {
    margin-top: -20px; float: left;
    }

    .phonenumber{
    color: #c20024; font-size: 24px; text-align: right;
    }

    .phonenumber, .phonenumber a {
    margin-top: -4px;
    }

    .anniversary {
    color: #d1d3d4; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: right;
    }

    .outer_callout.dynamic_el_1 {
    margin-top: 0;
    }

    .entry-content .gform_wrapper input {margin-bottom: 0 !important}

    .msie .content img, .msie .page-id-3486 .content img {
    width: 100% !important;
    max-width: 100% !important;
    }

    @media only screen and (min-width: 989px) {
    .portfolio-sort-container .no_margin.one_fourth {
    width: 24.98% !important;
    }}

    #854784

    Hi,

    This should work now.

    .template-blog .content img, .chrome60 .template-blog .content img, .page-id-3486 .template-page.content img, .chrome60 .page-id-3486 .template-page.content img { 
       width: 100% !important;
       max-width: 100% !important;
    }

    Best regards,
    Ismael

    #856983

    Ismael,

    WOO-HOO!!! It works! You’re a genius!

    Thank you for being so patient and persistent! This is why I use themes from y’all—the support is phenomenal!

    ISSUE CLOSED.

    Mark Besh
    Visual Impact Systems

    #857187

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

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

The topic ‘Angular 4.0 – Blog Images Render Too Wide in Explorer’ is closed to new replies.