How to fix border on all break points

[designerwriter]

My border looks weird on all 4 break points except the mobile version when I am in edit mode for the Graphic Design page. Yet when I look at the Graphic Design page on my cell phone, the border is showing up as a rectangle and not a square which is what I chose in Envira Gallery.
See the screenshots attached. I am also including a secure note.

[ruenel]

Hello Grace,

Thanks for writing in!

Did you add this custom CSS?

.envira-gallery-item-inner {
    border: 1px solid #000000 !important;
}

This is what is causing your issue. You are using the incorrect CSS selector. You should be using .envira-gallery-item-inner img instead so that the border will only be applied to the image and not on the container which resulted in this issue.

Please note that implementing and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Kindly let us know how it goes.

[designerwriter]

1. Ok reunel I fixed it. But some of the images are blurry when I view them. Is it because I made it 200x200px? In my writing into section, the images are 300x300px and they look sharp. Would you suggest I change the Graphic Design section to 300x300px?

2. Another thing that’s happening now on the writing into page is the border is cutting off the images at the top and bottom making it more like a rectangle instead of a square. I can’t see the captions under the images. Again, I can’t see this on the page because I can’t see the images and check the break points due to the fact I chose the Classic Gallery option. I am looking at it on an iPhone SE.

3. Another thing that’s happening on Mobile is the links aren’t working when I click on the image. There’s supposed to be a link to the respective pages and all I am getting is the Envira Gallery image then you can use the arrow going to the other images. It works on the bigger versions so I am not sure what’s up here. Again, I can’t check the links on all of the break points because I am using the Classic Envira Gallery.

[christian]

Hey Grace,

It looks like you’ve resolved all 3 issues. I checked the Graphic Design and Writing page. Please try clearing your browser’s cache.

If the issue is happening still, it could be that I’m checking a different page. Would you mind providing the URL where the issue is happening?

Thanks.

[designerwriter]

Sorry it’s eagleheartdynamic.com. I cleared the cache and in the writing section the borders are still cutting off the image and black bar at the bottom with the titles of the respective pages. Please check on your cell phone. I have an iPhone SE. I am using Brave. But I also checked on Firefox and the images are still cut off. Even though I chose square in the configurations, it appears as if the grid was chosen because it’s a rectangle. I checked and it’s still on square. I can’t even read what the captions are to the pages because they’re cut off.

Also, while you’re checking on the writing section, can you please tell me why the links aren’t working on both the Graphic Design page and Writing pages? I can’t go to the pages. This is a big problem.

While you’re checking the Graphic Design page, can you tell me why these images are so blurry? I think I will have to change the size to 300x300px. They are also looking pretty small when I first click on the intro page before clicking on the images. So I can fix that. But I am confused as to why the links aren’t working when I click on the images on the Graphic Design and Writing pages. I can’t show you a screenshot of the breakpoints because I am using Classic Envira Gallery.
Thanks.

[tristup]

Hi @designerwriter,

I have checked your website and found that there are different reasons behind the issue with image border. Few of the image has the border in them ( screenshot: 1), on a few of the cases border is added to the image element ( screenshot: 2 & 3) and in a few of the cases, it has been added to the cell ( screenshot: 4).

I have checked your Writing page and found the images are linked and the URL is opening properly in a different tab, it might be the reason for confusion. I would suggest unchecking the Open URL in New Window? option of each image in the Envira Gallery as shown in the screenshot.

I have also checked and found the Square Dimensions of the image is set to 200px, and also the image is not blurry. If you are seeing something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[designerwriter]

Thanks tristup. Which is better to put it around the image or the cell? I will try unchecking Open in a New Window to see if I can get to the page links. Should I uncheck the open in a different window box for both the Graphic Design and Writing pages?

Find attached what I mean about the Writing section intro page having the borders cut off at the top and the bottom. Quick question - is there any way you can great a more visible way we can find out what the page looks like for the various break points? Right now I can’t even check that because I am using the Classic Envira Gallery element.

Incidentally, tonight I unclicked ”open in new window” in the first image of the writing section in Envira Gallery and it is still not linking to the page.

[designerwriter]

Is anyone available to answer my question? Thanks.

[designerwriter]

Can anyone help me?

[tristup]

Hi @designerwriter,

It depends on you where you want to put the border, image or cell you can set the border to any of them. I have also checked the first image in the writing page and it opens the page Alternative Health page in the same window as expected.
If you are still facing any issue with it, I would suggest you check once by clearing all types of cache including Style Cache from Cornerstone > Settings > System > Clear Style Cache.

Thanks

[designerwriter]

So it’s better to just be consistent is what you’re saying correct? I think I will put it around the image. The problem occurred because I wasn’t using the menu at the top that says cell, image etc. I was just clicking on the image when it could have been the cell. I suppose if I use the menu at the top, it will be more accurate then?

Also, I had to put the link back that I took off on that Massage Therapy Journal image because it wasn’t going to the link in the desktop version. I just deleted the open in new window. I will try your suggestion of clearing the Style Cache later today. I already cleared the cache and it still doesn’t work. Will check back in later. OK?

[tristup]

Hi @designerwriter,

Yes, you need to be consistent while adding the border otherwise it will be a problem when you try to modify that in the future. And let me know if the links are still not working on other pages.

Thanks