Images aren’t lining up

Can you tell me why the images not lining up at the sides? I am referring to the bottom row.

https://xpro.eagleheartdynamic.com/

designerwriter

Hi Grace,

Thank you for writing in, there are 3 images that are not showing at the bottom, so I’m not sure if you’re referring to the Blockgeeks image or not.

But If you’re referring to the row with the Blockgeeks image, then that is not aligned because the Blockgeeks image has some kind of gray space above and below embedded to it.

Please see this, notice the gray area above and below.

Thanks,

friech yes I am referring to the row with the Blockgeeks ad. Ok friech I went back in and changed the size of the ad to make it 300x300px. I just extended the background and filter towards the bottom and then the white bar at the top. I think it looks better even though that’s not the actual size of the ad. Now when I pull the window out it looks not flushed on the sides but just slightly off and when I pull the window in, it looks flush. I can live with it since it’s only a bit off.

I had to make the image above it one long image and I had to make it 950px wide so that there wouldn’t be a gap on the ends. Do you know what the width would be for one image if I am spanning it across…is 950px correct because I am taking into consideration the gaps between cells? I am using a mixed column width by editing the images for the bigger ones.

I initially had Katpop Jewels business card in its own cell but then there was a gap. I might change it back but having the grey background shows continuity. What do you think visually and technically, which is better technically? It takes up a lot of room so I am not sure if I like it. Thoughts? The business card doesn’t work in the square either and I didn’t want to add an extended background on it so I might just ditch it the card design.

I checked all of the sizes and I think that big Katpop Jewels image is screwing everything up. Can you please check it and tell me what you think? Two of the images aren’t even showing up in the smaller sizes. I think I should just stick to either 2 columns for the larger images and one column each for the other images and forget the one column image.

The other images I have not placed in there yet since I wanted to see how this looked.

Hi Grace,

The images are 300px by 300px, but the cell width is 307.45px which is where the bit misalignment coming from. Try adding a width 100% to your image so it will take up the entire cell.

The Katpop Jewels is just fine to be that way, just make it one cell per row on mobile view so it does not look compress.

Cheers!

friech so I have to change it for each cell width and make it 100% in the category of size correct? I applied it and it’s a lot better! It just stays in place instead of moving. I decided to make the Katpop Jewels business card separate. I am definitely changing it because in the smaller sizes it doesn’t look great. The large Katpop image is not flush with the sides. I will fix it and then check again.

Should I make all of the images Object Fit Cover instead of Fill? I forget what that means. I noticed I did it for the first two images.

Ok I split up the Katpop Jewels images and it works better however, when I checked the breaks, the second option from the bottom doesn’t work on the Katpop Jewels logo and in the bottom option, the Katpop logo is not flush at the bottom. I clicked on Cover because when I used Fill, the image was squished.

Hi Grace,

Here is a complete documentation of the CSS object-fit Property.

I think it would be better if you crop out that Katpop logo removing that gray background embed to it, so it will have a transparent background, then apply the gray background on its cell.

Cheers,

Thanks. Will that make the images line up friech? I will try it and get back to you.
designerwriter

HI Grace,

Yes, just follow what @friech suggested.

Thank you.

This isn’t working on all of the breakpoints. Can you go in an have a look? I tried adding 100% but I still had an issue so I deleted the cell and had to start over again and left it as is until you take a look at it. I created a transparent background for both the Katpop Jewels business card and logo then added the color in the cell as you suggested.

When I redid it without adding the 100%, It looks good on 1200px and up but on the base breakpoint and 979 px, it screws up. For example, the cell height elongates on the base breakpoint option and on 979px and down, the logo floats to the top. I am placing everything using the 1200px option.

If I can’t get this to work right, I will just have to take these 2 images off and then drop the writing section images in then the photography images. I have spent far too much time on this so I sent you a secure note to see if you can get into my website and see what needs to be done. Thank you for your help!
designerwriter

Hi Grace,

That actually looks better than your previous setup. What is left to do is enable the flexbox option of the cell, and set it to horizontal and vertical center, to make sure the logo will be always on the center of the cell.

Cheers,

Ah…you know, I thought of going to flexbox next but I wanted your opinion first. I did not implement the 100% again because it was working with the default. If this didn’t work, I was just going to create a square for the Katpop Jewels logo but it would be cut off. It takes up a lot of room so I may just change it to a square and add another logo beside it…after all that! Thoughts? How does it look visually to you like there is too much space? I learned a lot in the process. I always learn through trial and error but I need some mentoring which I appreciate from all of you guys on this forum.

Can I make a suggestion? Can you please suggest to the developers to add a sort images in page mode? I want to move the logo to the left and business card to the right. It makes more visual sense. But now I have to delete and input the information again whereas a sort images would be an easy fix. Thanks.

Also, in the base breakpoint option, there is an empty image space on the bottom right yet there isn’t that problem in the other views. Why is that and how can I remedy it? I would like the images to appear in an even number in all of the views but I guess it won’t matter in the smaller views where the images are on top of one another. I may just leave it as is if it’s just happening with that option.

A question: Why does the base breakpoint not have a numerical value like the other options?

designerwriter

Hi Grace,

As far as my design skill goes, this is the best layout you can do of this set of images. Maybe you can maintain the rectangle orientation of the Katpop Logo, so it should take up two cells on XL, LG, and MD screens.

Remember what you did to that first image “Ultimate Investor’s Guide”? Do that to Katpop Logo.

Sorry, I’m not sure what do you mean “sort images”, you can drag and drop images inside the builder to rearrange it. If that is not what you’re asking for, please clarify.

You need to remember your Grid layout, on the XL and LG view, you have it as 3x3.

On XL, you have the Katpop logo taking up 2 cells. Pushing the next cell (Specialty Metals) below.

On MD, the Katpop logo only taking 1 cell, and so the next cell (Specialty Metals) back to its normal place.

That is for visual purposes, adding the numerical value plus the label base breakpoint would be too lengthy. If you need to see the breakpoint value, please navigate to Theme Options > Layout and Design. The numerical value on the side of the icon is the breakpoint range.

For example the LG breakpoint range is between 979px to 1200px

Hope that helps,
Cheers!

Agreed. For the sake of simplicity, I think I will turn the logo into a square showing the logo partially. This way, I will not have the issue with the extra space at the end in the other version correct? Oh I see re the base breakpoint.

Regarding sorting, do you meant that I can move the images in the media library? I didn’t know I could do that. Where have I been!? lol

designerwriter

Hi Grace,

I don’t think you need the Katpop Logo to be square, you just need it to take up two cells, as I’ve suggested above. This will also resolve the extra space at the end issue, so you hit two birds in one stone.

No, I did not mean Media Library, I mean inside the builder. You can sort the image in the Media Library by Filename, Author, Uploaded to, and Date

The Media Library is native to WordPress, the Theme (PRO) has nothing to do with it.

Cheers,

So is this the same Media library or do I have to replace them in the builder? I tried using the rectangle logo and it still gave me that space. See attached. I am going to try doing the square to see if I get this.

Hi Grace,

Base on your screenshot, you did not make the Katpop Jewels logo take up 2 Cells.

I see you made the Katpop Jewels square so everything will be square. If It’s ok for the Katpop Jewels logo to be cut off, then that is fine too.

Cheers,

Yes I made it square because when I made it 600x300, the extra space was showing up in more than one viewing option but as a square, the empty space is showing up only on 979px. I want a total of 12 images on the front page from each section that’s all.

Can you please send me a link about the Pro Media Gallery page and how to sort images etc.? Thanks friech.

Hi Grace,

I’m sorry, I really don’t know what do you mean Pro Media Gallery, I already told you about the native WordPress Media Gallery above, but it seems you’re referring to something different. Please clarify.

I kindly ask, please create a new ticket regarding that Pro Media Gallery you’re referring to as this one is getting longer and hard to follow.

Thanks,

I meant when you said this… *”No, I did not mean Media Library, I mean inside the builder. You can sort the image in the Media Library by Filename, Author, Uploaded to, and Date”