What is the difference between using the Grid element versus columns + rows? I set up a section and from the template, I chose one column then dragged the grid column over but it gave me 2 columns not 3. What am I doing wrong?
Actually, nevermind I figured it out! I just added an extra 1fr. I am going to experiment with different ratios.
I have a question though. What is the difference in functionality between Grid element and columns + rows?
Thanks.
Hello Grace,
Thanks for writing in!
With the Row/Column setup, you will have a consistent number of columns set up. For example, if you have set up a two-column layout in your row settings, you will always have two columns even if several columns are added in a row element.
With the Grid element, you can have a two-column, one column or even more than two columns in a row. You can also adjust the height of a particular cell that will cover two rows. It is best that you check out our video demonstration here:
Hope this makes sense.
Hi ruenel. I am about half way through the video and subscribed to Themeco’s Youtube channel. But the problem I have encountered is that the image in cell 3 is falling short of its height 300x300px so it’s uneven. I even tried stretching it in edit mode. See the screenshot. This is exactly how I wanted it to look in Envira Gallery but I couldn’t achieve it.
Also you know how I used Envira Gallery for the Technology2 page but had to use 3 placeholders in the other 3 columns because I only had 1 image for the Technology section? Could I use the Grid element option, add the 1 image to column 1 and leave the others blank? That way I will not need a placeholder. At least I have options.
Hi Grace,
What you can do is add a 100% height to the image.
Or
Set an equal 1) maximum height to your cell and set the overflow to hidden
You can apply a min-height to the empty columns and that should work without the placeholder
Hope it helps,
Cheers!
It did not work for me friech. I emptied the cache and refreshed the page. This is in edit mode. Why isn’t it lining up at the bottom? It should in edit mode line up correct? In the frontend, it is way off. See the second screenshot.
Hi Grace,
I would like to address this first since this can be easily overlooked.
See these screenshots, these are from your second to the last reply.
Notice you’re editing the Large view (979px to 1200px) on the Builder, but the preview on the frontend is Extra Large (1200px and up)
Also, notice the X and Y axis alignment of the cell because that can be different for each screen size if it’s not set to auto. it will make you confuse why it’s different from the builder and the frontend,
Another way to resolve the issue with Image is to set the width and height to 100%, and then set the object-fit to cover
See the second section I created for reference.
Sorry, I forgot to mention that the min-height should be equal to the height of the first column/image.
Cheers,
friech why do the images that I created at the top look ok in edit mode the way I want because the first blue image isn’t spanning across 2 columns yet it does in edit mode. Also, which one of the computer icons in the cell layout the extra large the one below or above the large icon?
I would like to know why the image that you prepared of the blue image on the left looks squished in edit mode but correct on the frontend whereas it’s reversed in the images that I created at the top…it looks ok in edit mode in my example but squished in the frontend view. That’s really odd. In other words, can I do something to avoid making the font and image look squished?
Regarding the Technology2 page, I think I will just stick with the Envira Gallery of using the placeholders. I don’t have the time to fiddle with this anymore. I just want something quick and easy for my writing section.
Thanks.
Hi Grace,
Here’s a guide:
XS: (below 480px) [mobile portrait icon]
SM: (480px and 766px) [mobile landscape icon]
MD: (767px and 978px) [tablet icon]
LG: (979px to 1199px) [laptop icon]
XL: (1200px and up) [computer icon]
On the edit mode, you’re editing in LG size, you can see on one of your screenshots that the LG on Cell Layout is the one highlighted.
But when you preview the page on the frontend it previews the XL that is why you’re still seeing the first cell not spanning across 2 columns, try to reduce the size of your browser under 1199px and you will see your LG layout. If you have not yet, please watch the video #3 and #4 of this playlist to understand how the Cell Placement works.
Regarding the Image responsive issue, we need to consider the Aspect Ratio of your image the 600x300 (2:1) and 300x300 (1:1) will respond differently.
That is the option in the Image element called object-fit you can set that to cover, that is not going to squished or stretch your image, but it will crop. You need to compromise.
Please see this article to understand how image responsive works.
Hope that helps,
Cheers,
Blockquote
But when you preview the page on the frontend it previews theXLthat is why you’re still seeing the first cell not spanning across 2 columns, try to reduce the size of your browser under 1199px and you will see yourLGlayout. If you have not yet, please watch the video #3 and #4 of this playlist to understand how the Cell Placement works.
Ok but what if someone else doesn’t have their browser set to these settings? I changed it to 1199. I also dragged the square left blue image to fit the next column to give it the 600x300 dimension. I checked the settings for your sample and my sample and they are the same. But what I am getting when I resize the browser on my sample in the frontend mode, is that square photo not being flush at the bottom again. Yet it is flush when I resize the window. See attached screenshot.
Regarding your comment…
Blockquote
Regarding the Image responsive issue, we need to consider the Aspect Ratio of your image the 600x300 (2:1) and 300x300 (1:1) will respond differently.
So are you saying that it would be better if I had all squares like the Home page is now because this would avoid resizing issues?
Blockquote
That is the option in the Image element called object-fit you can set that tocover, that is not going to squished or stretch your image, but it will crop. You need to compromise. Please see this article to understand how image responsive works.
Thanks for the advice. Yes I changed both test images to cover and I see what you mean. My issue is the images getting cropped in the wrong place (not where I want it cropped) so that you can’t see the copy but I will have ALT text implemented in the media section for each image. That was a useful article thanks. I bookmarked it.
Hi Grace,
There is a Preview Size option on the builder so you can always preview your layout on any screen size.
Can you provide a login credentials for us again, I want to check your sample layout again on why is that happening on the square image.
No, what I mean is we should consider the image aspect ratio in conjunction with the Responsive Image. We can ignore this if you’re fine with the cropping of the image (object-fit: cover)
That is where the object-position option came to play, you can use that option to focus on the area of the image (so it does not crop on the wrong place). More details about that here.
Hope it helps,
Cheers!
Ok friech I sent you may creds. I will look into your response and choosing the crop etc. this afternoon. In the meantime, I look forward to your response re the flush bottom issue for the square image.
I previewed the Home page (not the Home test page) and unfortunately, it doesn’t work in the XS and SM. There is a big space between images 1 + 2. Where is coming from? Also, when I have the browser window open to larger than 1199, I get that space. Should I set my browser to 1200 instead? See the attached images.
Would it be better if I just used the Envira Gallery Squares or Mason template? I checked the first Home page test with the Mason template for this space in the middle of the two images and there is no space when I preview in different sizes or when I resize the browser to large. It’s probably better if I just stick to a template to avoid this although I am curious as to WHY this is happening.
Hi Grace,
I see what is the issue with your second cell (Beleza image), that is because of the Y Axis Alignment, please set that to auto. And make sure the cell maximum height is set to none
That Space between the image (On mobile layout) is an empty Cell. Remove the empty Cell that is on your Grid and that space will be gone.
I’m sorry If I’m not explaining this Grid feature really well. I strongly recommend watching the Grid playlist turtorial, this will answer a lot of your questions regarding the Grid Cell, more importantly, the video #3 and #4.
Thanks,
Hi friech regarding the empty cell it doesn’t look that way in edit mode. See attached screenshot. Thanks for the info. Maybe once I change this Y Axis Alignment, the empty cell will disappear? I will have to do it in the morning. I see why there is an empty cell. Cell 2 got switched with cell 3 somehow. Weird. I will do the changes on the Home page to save time.
Hi Grace,
On the builder, those empty cells (or columns) has a minimum height of 250px that’s what makes them look like an empty square. On the frontend, those empty cells have no height at all so you don’t see them on the frontend (unless there are padding or min-height apply on those empty cell).
No, that is how the Cell 2 and Cell 3 placement setup. Please check their placement.
Cheers!
friech I looked in edit mode and cell 2 is below the large blue image and cell 3 is to the right of it which doesn’t make any sense. If I put an image in cell 2 will that empty space go away? Maybe it’s because all of the images have not been filled in yet. I will look at the documentation today.
Regarding the previous post, everything is set as you stated…auto and minimum height none but it still didn’t work. The square image isn’t flush at the bottom.
Regarding the cell 2 + 3 boxes switching, when I did the Home page, I placed the image in cell 2 but in the large view, the empty grey cell is showing up in cell 2. Is this the way it’s set up? Check out the screenshot. The other views are ok. Cell 2 is showing up where it’s supposed to.
Actually, I just deleted the grey image box and cell 2 ended up in the right place again. So all the previews look ok now except for the Beleza image. It’s not flush at the bottom for the LG and XL previews. Why is this?
Hi Grace,
The order of the cell can be neglect if you set the cell’s placement. Here is the LG cell layout of cell 3. That makes sense that is why it’s in the second place when viewed on LG screens. And the cell 2 (Beleza image) automatically drops under.
Please apply the 100% base width and height to the (Beleza) image.
Sorry but this thread is getting longer and I feel we are just going around. Please watch the tutorial I linked above, and if you still have questions after that, please write them on a separate thread.
Have a nice day,
Yippee! It worked. Thanks for your help friech. The thread is getting a bit long but we are done now. There’s some good information on here though so I am glad that we worked through it. You’re the best!
One more quick question. So should I change the LG cell layout numbers or leave as is?
Peace
designerwriter
Hi Grace,
I’m glad to hear that.
Yes, please set the cell 2 and cell 3 placement to Use Auto Placement, so they fall on their default order.
Right-click the LG icon and set Use Auto Placement
Cheers,
This is very weird. I got unexpected results. When I go to edit mode and go to view how it looks with the different sizes, it turns to squares in the MD, LG and XL views. In edit mode, goes back to squares. But when I go to the front end, it turns out the way I want with the 600x300px ratio for the blue image and 300x300px for the Beleza image. Why is this happening? I think I will have to change it back. It was just that cell 3 was switched with cell 2 before so now it’s sitting in the right place. See the screenshots:
Edit mode
Frontend mode
View mode
