1. 

   wcamp
   

   offline

   Member

   Hello:

   On my page, I have a pair of arrows at the left and right side of enlarged images. When the arrows are clicked, the open image advances to the next enlarged image. The arrow size on desktops and laptops is fine. However, after applying the following rule to the smartphone media query, each arrow image remains large and doesn't scale.

         right-arrow.svg { height: auto !important; width: auto !important; max-width: 100%; }

   Would one of you please suggest the appropriate media query declaration(s) to use so that the arrows scale when viewed on various sizes of smartphones?

   Thank you.

   Here's the page: http://www.warrencampdesign.com/blog/galleryMasonry/skiesDayNight.html

   My external style sheet: http://www.warrencampdesign.com/blog/css/blog.css
    
    
   Click any thumbnail to enlarge it; the arrows will become visible on the enlarged image.

   Warren

   Posted 2 weeks ago
2. 

   mandarin
   

   offline

   Member

   Warren

   No large arrows showing on any full size image here using Chrome browser on W10.

   Posted 2 weeks ago
3. 

   wcamp
   

   offline

   Member

   Hello, again, Mike!

   The large arrows appear for me on Safari. However, now that I checked on Chrome for Mac, no arrows! Strange, indeed.

   Here's a screen shot of the arrows on the sides of an enlarged image using Safari. . .

   http://www.warrencampdesign.com/blog/images/TESTpv7-largeArrows_desktop.png

   And here's what appears when viewing the enlarged image on a smartphone. . .

   http://www.warrencampdesign.com/blog/images/TESTpv7-largeArrows_smartphone.png

   Hope this clarifies my request to learn how to scale down the large arrows when viewed on smartphones.

   And if you, Mike, or someone else, can advise me of why one browser reveals the arrows while another doesn't, I'd love to learn what causes that.

   Thanks.

   Warren

   Posted 2 weeks ago
4. 

   wcamp
   

   offline

   Member

   Hello, again. Finding no response in four days, I think it wise to ask again. . .

   1.  What media query entry or entries might be needed to control the size of the left and right directional arrows when viewing the page's enlarged images on a smartphone?

   2.  Do you know why the arrows are visible when viewing with Safari, yet aren't visible when viewing with Chrome (or others)?

   I hope you'll get back to me with one or both answers.

   Thanks, very much.

   Warren

   Posted 2 weeks ago
5. 

   mandarin
   

   offline

   Member

   Warren

   Lots of CSS code on that page - can you narrow down to which css file is actually supposed to be running the gallery / arrows.

   Might be an issue for whoever designed the gallery script but can have a look with a file to check rather than wading through the lot.

   Posted 2 weeks ago
6. 

   wcamp
   

   offline

   Member

   Mike, hello!

   Sorry for the delay in responding.

   [I bought this template in early 2016 but no longer have access to its creator's support link.]

   I'd given numerous declarations a try without success. Finally, after a couple of trial-and-error days, I learned that the declaration affecting the size of the directional arrows was the ".mfp-container button".

   So, in the "mobile" media query of my "blog.css" sheet, I added this declaration: .mfp-container button { background-size: 30px 30px !important; } . . . and it worked!

   However, more is needed because: (1) the left directional arrow no longer appears on the enlarged images, and (2) the button in the lower-right corner of the image container that identifies the specific images ("1 out of 54" for example) doesn't show fully.

   Might you have the ability to determine what entry or entries I need to add or revise that will correct those two glitches?

   Thank you. my friend.

   Warren

   Posted 1 week ago
7. 

   mandarin
   

   offline

   Member

   Had a look but nothing jumping out at me so not sure can help.

   BTW, still no arrows in Chrome here.

   Mike

   Posted 1 week ago
8. 

   lancer15
   

   offline

   Member

   Hi Warren,

   This may help...

   These are the CSS styles for the arrows from the blog.css:

   .mfp-container button { box-shadow: none; background: none; opacity 1 !important; outline: none; border: 0 !important; }
   .mfp-container button.mfp-arrow-right { background: transparent url("../images/right-arrow.svg") no-repeat center center; }
   .mfp-container button.mfp-arrow-right::before, .mfp-container button.mfp-arrow-right::after { display: none; }
   .mfp-container button.mfp-arrow-left { background: transparent url("../images/right-arrow.svg") no-repeat center center; -webkit-transform: scaleX(-1); -ms-filter: fliph; filter: fliph; transform: scaleX(-1); }
   .mfp-container button.mfp-arrow-left::before, .mfp-container button.mfp-arrow-left::after { display: none; }
   .mfp-container button.mfp-close { visibility: hidden; }

   This is the link to the right-arrow image:
   http://www.warrencampdesign.com/blog/images/right-arrow.svg

   There is only a right-arrow image. The left arrow (forth .mfp) is just the right-arrow image transformed (flipped) on the x-axis.

   I would remove the ".mfp-container button" class which reduces the container for the arrow to only 30px and add auto widths ("width: auto !important;" and "max-width: none !important;") for both the
   ".mfp-container button.mfp-arrow-right" and ".mfp-container button.mfp-arrow-left" to your mobile media queries.

   Hope this helps,
   Lance

   Posted 1 week ago
9. 

   wcamp
   

   offline

   Member

   Glad to meet you digitally, Lance! I thank you for weighing in on this with me. I feared that no one else had an idea of what was needed.

   I BELIEVE that I did as you suggested. I replaced the single media query entry that limited the arrow size to 30px with the double entries for "arrow-right" and "arrow-left." Here's how it now looks on my style sheet:

   .mfp-container button.mfp-arrow-right { width: auto !important; max-width: none !important; }
   .mfp-container button.mfp-arrow-left { width: auto !important; max-width: none !important; }

   However, when I open the page in Safari and switch to Enter Responsive Design Mode and choose one of the three smartphone windows, neither arrow now appears on the images that get enlarged. Have I erred in entering what you suggested?

   Here's a new page for you to look at that shows the missing arrows. . .
   http://www.warrencampdesign.com/blog/gallery-masonry.html

    
   In your e-reply, please tell me which browser and OS you use to view the page and its enlarged images on smartphones.

   Thank you very much, Lance.

   Warren
    

   Posted 6 days ago

RSS feed for this topic

Reply

You must log in to post.