Border issue only shows up on some...

User 2659348 Photo


Registered User
98 posts

I'm using SD5 Build 3429, Foundation 6.6.3, and this is a photo gallery component made by Inger.
These pics have a 2px border. There is NO padding or margin set on the picture element.

This 1px gap around part of each pic shows up on Chrome and Microsoft Edge, but in Firefox they look great (no gap between pic & border)
I think Inger originally made this for SD3. But does anyone have any clue why this could be happening?

It looks great in the Device View, but not when I preview it in a browser preview (except Firefox). Is it an issue with "preview" that will likley not be there upon publishing?
Attachments:
Knowing is half the battle
User 2699991 Photo


Registered User
3,713 posts

zip the project and attach it or send it to me & I will have a bo-peep, its almost impossible to know what could be going on from just an image screenshot

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,739 posts

Hi Chris,

I made the component with a 3px wide double border. Did you remove it? It looks like when I made it, I must have had it at the widest breakpoint, and afterwards, I remembered to move it down to the narrowest one and created the border there too. That sometimes happened when I was fairly new to mobile-up design. So you need to remove the border in two places - or download it again. I have corrected it.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2659348 Photo


Registered User
98 posts

Wayan,
I tried to attach a zip of just Inger's Gallery - after I modified it how I like it. But on my Win10 machine when I right-click and "Send to compressed (zip) folder" it barely compresses it. I can't get things down to the 1MB that coffeecup requires. It's funny, this file actually has less in it than when I downloaded it from Inger's site due to me deleting some of the pictures.
Is there a program or app you all use that does this?

Inger,
Yes, I removed the 3px double-border and used a 2px solid border. The attached file is what I made a component out of, inserted into my site, and then changed out the pictures for my own. As you can see, I changed the modal (Container #img3.reveal) a lot. But I didn't change much on the picture links - just the border as mentioned above.
Of course, when I change it back to a double-border it looks great in preview. When I have it as a solid border, it's almost like there is some "artifact" left over from when it was a double-border.
Knowing is half the battle
User 2659348 Photo


Registered User
98 posts

Ok, Seriously. I am proud of myself for all that I figure out about SD5 and not having to bother anyone for help much at all lately.
But I really am stumped at how you all share files of all your sites in this forum. In order to get a file under 2MB, I have to strip it of all it's pictures. I really don't see how you all can upload zip files of enitire websites; I can't even upload a one page thing.
The gallery file that I download from Inger's site is currently 3.55MB - and that is with a few less pics than the original. When I zip the file it only goes down to 3.41MB. It's so frustrating that I can't do a simple task (zip) that people do in here every day.

I downloaded WinRaR and that didn't work any better (plus cc can't accept rar files).
I downloaded 7-zip but that didn't compress the file any better.
Knowing is half the battle
User 187934 Photo


Senior Advisor
19,665 posts

The limit is 2MB. Upload it to your host and share a link if it's bigger than that.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2659348 Photo


Registered User
98 posts

Here it is:
http://www.arkansaslocalbusinessreview.com/#

So any ideas as to why the border looks funny around each pic (the gap between pic & border)?
At different screen sizes the gap is in different places around the pic. Sometimes it's on 2 sides and sometimes on 3 or 4.
Knowing is half the battle
User 2699991 Photo


Registered User
3,713 posts

Chris S Peterson wrote:
Here it is:
http://www.arkansaslocalbusinessreview.com/#

So any ideas as to why the border looks funny around each pic (the gap between pic & border)?
At different screen sizes the gap is in different places around the pic. Sometimes it's on 2 sides and sometimes on 3 or 4.


Looks ok on all browsers from here with no gap at any size and all the browsers that I have

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2659348 Photo


Registered User
98 posts

Wow. I just made my wife come look to be sure I wasn't crazy. And she sees it too.
Wayan, do you see the gap in the screenshot image I posted earlier?
Knowing is half the battle
User 2699991 Photo


Registered User
3,713 posts

Chris S Peterson wrote:
Wow. I just made my wife come look to be sure I wasn't crazy. And she sees it too.
Wayan, do you see the gap in the screenshot image I posted earlier?

Yes I see it, si it must be to do with the image that you have replaces with the one of the decking

I got the email attachment but it is Ingers component, I need see your project file with the first image which you replaced

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.