Forum Replies Created

Viewing 30 posts - 1 through 30 (of 127 total)
  • Author
    Posts
  • in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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;
    }}

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #852033
    This reply has been marked as private.
    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #845314

    Ishmael,

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

    Mark

    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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 1 month, 3 weeks ago by  mbesh.
    • This reply was modified 1 month, 3 weeks ago by  mbesh.
    • This reply was modified 1 month, 3 weeks ago by  mbesh.
    • This reply was modified 1 month, 3 weeks ago by  mbesh.
    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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 1 month, 3 weeks ago by  mbesh.
    in reply to: Angular 4.0 – Blog Images Render Too Wide in Explorer #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

    in reply to: Angular Drop Down Menu Width #686972

    Rikard,

    Worked great.

    FYI: These are the width numbers I used to line everything up:

    #top .main_menu .menu li ul a {
    width: 168px !important;
    }

    .main_menu .menu ul {
    width: 200px !important;
    }

    This is how it looks:
    http://fruitsofthebeatitudes.org/
    ( Click on “FO.T.B.” main menu item to see the drop down menu width ).

    Also, just to be clear, I am using the “Angular” theme.

    Thank you very much!

    ISSUE CLOSED.

    Mark Besh
    “Fruits Of The Beatitudes”

    Ismael,

    We would not be interested in changing to the Enfold theme, but would it’s Lightbox be able to be used with the Angular theme?

    Thanks,
    Mark Besh
    Visual Impact Systems

    Ismael,

    Thanks for the tip.

    Since Google is now giving ‘preference’ to HTTPS sites, it might behoove y’all to make the Lightbox work properly.

    Mark Besh
    Visual Impact Systems

    Ismael,

    It just seems that when we have an ‘inline’ link to a video, it tries to play it in the Lightbox. Example:

    (Click on “View Demo Reel”)
    [ This used to work fine before making the site SSL].

    Is there another way to do this?

    Mark Besh
    Visual Impact Systems

    Ismael,

    When we changed the embed URL to “https://….” it shows up and plays in the post (and on the Ajaxed pages).

    But, even when we changed the link BELOW the video (so it will play in “Lightbox”) it does not play:
    https://visualimpactsystems.com/ (Purchase code hidden if logged out) -repair-video-walbro/
    [ It works fine on our NON-SSL “staging” site ]

    Any ideas?

    Mark Besh
    Visual Impact Systems

    Basillis,

    Is there some way you can get this to Kriesi to look at? (WPEngine informs us that we CANNOT ‘regress’ back to WP 4.5.2, so none of our videos on the site can be viewed).

    Thanks,
    Mark Besh
    Visual Impact Systems

    Basillis,

    We are running Angular 4.0 and the latest-greatest WP 4.5.3 (and 4.5.3 is what ‘broke’ it). [ WPEngine automatically upgrades to the latest version ].

    Here’s a link to our “staging” site, which is exactly like our ‘live’ site, except it is still running WP 4.5.2—and all the videos work fine:

    VIDEO EXAMPLES:

    VIDEO PRODUCTION

    BLOG POSTS:
    http://visualimpact.staging.wpengine.com/ (Purchase code hidden if logged out) -video-author-nozer-buchia/
    http://visualimpact.staging.wpengine.com/ (Purchase code hidden if logged out) -repair-video-walbro/

    So, evidently there’s something in WP 4.5.3 that is affecting video embeds.

    Mark Besh
    Visual Impact Systems

    in reply to: Angular Website Speed #644802

    Rikard,

    Thank you for the quick response.

    I didn’t mention this but we cannot use any “cache” plugin since we being hosted by “WPEngine”, and they have their own ‘built in’. We will ask them about using the minify and compression plugins.

    The one we thought we would be able to do right away was the “eliminate render-blocking of Javascript and CSS (that’s why I included our CSS file). Is there anything we can do about this?

    Thanks,

    Mark Besh
    Visual Impact Systems

    in reply to: Angular – Is Version 2.3 Required for WordPress 4.4? #572957

    Yigit,

    Will this work the same way for the Angular theme?

    Mark

    in reply to: Angular – Is Version 2.3 Required for WordPress 4.4? #572942

    Rikard,

    I’m sure you are correct that it is always ‘best’ to run the latest versions. We are just ‘graphic designers’ and are not familiar of how to create a “child theme”—maybe that might be something to investigate in the future.

    Because our hoster will probably ‘force’ us to upgrade soon, we just wanted to know from Kriesi whether or not v2.3 is “absolutely” necessary for WP 4.4

    Thanks,
    Mark Besh
    Visual Impact Systems

    Kriesi/All,

    That DID IT! We’ve been able to add up to 6 more items (what we needed right now) to a few portfolios than the previous max of 48. [ FYI: WPEngine said that their maximum is 2000 ].

    We VERY MUCH appreciate all the efforts everyone put into this!

    ISSUE CLOSED.

    Mark Besh
    Visual Impact Systems

    Kriesi,

    We did do this, and it did allow us to add 3 more images, but it seem to slow the interactivity down, and it gave us a “WordPress Failure Notice” (Timeout) after updating the page to save the additional images to the portfolio (this has never happened before, even when we’ve been editing for hours).

    This is the .htaccess:

    php_value max_input_vars 5000

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>

    # END WordPress

    ==========

    FYI: We use “WPEngine” for our hosting (purported to be one of the fastest WordPress hosting platforms in the world – http://wpengine.com/ (hosted on WPengine) ).

    Do you think that they don’t ‘like’ the increase, or maybe it should be another value or done a different way by them?

    Mark

    Elliott,

    We deleted the ‘old’ Angular folder and then copied a ‘fresh’ copy of Angular 2.0 into the themes folder. Then we tried to add the 49th image to the “Banner Stand Graphics” portfolio. The check mark appeared to tell me it was added (and I could see that it was added in the background behind the add image ‘dialog box’), but when I updated (saved) the page, it ‘discarded’ the addition, and would only show 48 images.

    Hmmmm…

    Mark

    in reply to: Angular Portfolio Grid Line Disappears #395377

    All,

    Thank you for all your efforts on this, but we just noticed that both the “portfolio-sort…” and “dynamic_element…” code messes up the “gallery slideshow” when the user clicks on either the “previous” or “next” button (it ‘stacks’ them separately below each other, rather than just ‘replacing’ the current one with the new one).

    I guess we will just have to ‘deal with it’ that it doesn’t render the grid line properly all the time.

    We really appreciate all your efforts!

    ISSUE CLOSED.

    Mark Besh
    Visual Impact Systems
    mbesh@4VIS.com

    in reply to: Angular Portfolio Grid Line Disappears #394367

    Ismael,

    The above code is in there, but it is at the end of the file. Should I move it?

    Mark

    FYI: Here is the current custom.css file:

    /* 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: -10px; float: left;
    }

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

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

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

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

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

    .portfolio-sort-container.greyscale-active.isotope {
    overflow: visible !important;
    }

    in reply to: Angular Portfolio Grid Line Disappears #394017

    Ismael,

    No, it does not happen if you don’t resize the browser window. But, someone like me has multiple windows/tabs open with file windows open too, and I have to resize the browser window to see my files.

    It does not happen on phones/pads since they only rotate and this does not happen when it ‘loads up’ originally (only when you resize).

    Since we design web sites for clients, we does wanted our site to be an ‘example’ of our work—and wanted it not to have any ‘issues’.

    Mark

    Moderators,

    Any thoughts on how to put more than 48 images into a portfolio?

    Thanks for your efforts,
    Mark Besh

Viewing 30 posts - 1 through 30 (of 127 total)