PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » General Web Design

Need Help Scaling an Image — Thanks

(12 posts) (4 voices)

Started 5 years ago by wcamp
Latest reply from wcamp

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 5 years ago
mandarin

offline
Member

Warren

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

Posted 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
wcamp

offline
Member

Could one of you please help me out?

I've not heard back from Lance (lancer15) for two weeks and, after following his direction, I don't know what to do to get my two directional arrows to appear; neither left/right arrow appears when a thumbnail image gets enlarged. ( : - (

I hope very much that, if Lance doesn't respond, someone else will.

In advance, I thank those of you who will weigh in with a recommended fix.

Warren

Posted 5 years ago
bizpat

offline
Member

I may be wrong but you are asking help for non-P7 items. You have a blog going on and some code from a masonry gallery. Pretty hard for any of us to figure it out from afar.

There is this whole item too:

/*!
* Isotope PACKAGED v2.0.1
* Filter & sort magical layouts
* http://isotope.metafizzy.co
*/

Posted 5 years ago
wcamp

offline
Member

Hello, Pat:

Thanks for connecting with me.

Yes, from the list of "Available Forums," my inquiry deals with "General Web Design," not a PVII product. And the "Isotope PACKAGED v2.0.1" package deals with a masonry format's default layout mode, which works by placing elements in optimal position based on available vertical space.

To summarize:
1. On computers, each click-enlarged thumb appear with a fat red left and right arrow when using Safari. However, on Chrome (Windows and Mac), the arrows don't appear.

2. Further, when viewing the enlarged images on smartphones, the two arrows disappear.

If it's too difficult to determine the solution for part 2, might you or someone familiar with Macs (such as Gerry) know why Safari makes my two directional arrows appear while Chrome (and other browsers possible) fail to make them visible?

Thanks for your efforts at answering at least part 1 or part 2 of my inquiry, Pat.

Warren

Posted 5 years ago

PVII Forums » General Web Design

RSS feed for this topic

Reply

You must log in to post.