Dear team at Themeco, first wishing everybody to be healthy and safe.
Please, I really appreciate your help with this issue.
I am working in a new site (which I will be buying a license).
I am a website builder, but, I haven’t found the culprit of this behavior;
check here [new two pages] .
When switching pages, the lower Row and footer bump down and up to the place they should be.
All the photos are the same height, in the Row 1, in the slideshows (in Row 2), and in the lower Row 3.
The Row 3 have a top negative margin of -9 rem. Both pages are supposed to be similar and a few changes, like the car and some text.
In the Row 2, the Colunm 1 with text is normal, the Column 2 with a Content Modal and slideshows, have a 1 rem top margin.
How can I stop this bumping?
Thank you very much in advanced for your big help.
Dear team at Themeco, first wishing everybody to be healthy and safe.
Thanks for writing in! The jumping happens as soon as the slider is fully loaded. To prevent this from happening, you need to set a minimum height for your column. The minimum height should match with the minimum height of your slider. In the column settings, you may insert at least
Hope this helps. Kindly let us know how it goes.
Dear Rue, thank you very much for your prompt answer,
It is weird, but in the Column settings I do not have that window you have in your photo.
I attached what I have, for the Column and Row.
If there is a possibility those settings are hidden, by any reason, how can I make them to appear?
Thank you a lot.
Have a great weekend, be safe and healthy,
If you don’t see some of the style options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode
Please let us know if this works out for you.
Thank you very much Ruenel, that trick of the Column size help a lot. It was not easy, I had to play around with the lower row negative margin and the Column min height size. until they work together and no bumping. I hope there would be a better and faster way to do this.
Plus to add more work, I have to work with the other screen sizes, and create new Columns, new Rows and even a new Section for the two smaller sizes.
I assume that this issue happens when there is overlay of Rows with negative margin.
You can check what did. I am 90% satisfied with the result, but we have to compromise.
If you can give me an idea what to do with the other sizes, I appreciate it. I have been crazy trying to fix all the issues with the layout. The second Row in the iPad, the columns don’t show correctly, one on top of the other.
In the middle size screen, the Row 1 are overlapping, they do not shrink. Maybe I should make just an image with the two of them.
Thank you Ruenel, I appreciate all your big help.
Thanks for updating in! I have checked your site on a smaller screen and I am seeing this:
Please check out your column layout option in the row settings so that the column width will expand or collapse.
When I checked your layout in different screen sizes, you have a complicated design. Since you are using the Pro theme, you can take advantage of using the Grid element. You may also check out our video tutorials so that you will be more familiar in using the Grid element in making complex layouts and in different screen sizes.
Hope this makes sense.
Dear Reunel and Themeco Team, thank you, thank you very much for THE GRID.
I’m definitely going to teach myself about the Grid. Your tutorials are excellent.
It brings me back to the times of Dreamweaver of Macromedia, of course, totally improved and advanced.
I have taught myself about 80% of what I know and I am a music professor. I know the best is to take classes with somebody.
Thank you very much Reunel for your big help. I’ll keep you posted as soon as I learn and begin making my layout with the Grid. Which must be done this week. It is a job.
Have a great Fall,
You are most welcome.
And we wish you a nice fall as well!
This is my first try with GRID ELEMENT , it is unbelievable. Thank you for letting me know about it.
I made a template named Grid-AAA-Template, then I saved it as template, and copied to Lincoln and Chrysler pages, do some little changes of content in Chrysler page, and this is the result;
In big computer screen it is good, just the footer coming up in the Chrysler page. Even though the Car photos are different, the height size is the same, 466px
slideshows are the same size too, 930 x 620.
There are lots of small details to check. By the way, after making a new section, by default it ads a Row and a Column, then I added the Grid. I took the layout of two Cell 2 with one overlaid. I moved them around to put the Cell 2 top over the lower part of the Cell 1. After I finished adding elements and aligning them, the Car on the Cell 2, was behind Cell 1. WOW, I thought it will be on top overlaying Cell 1. well, I just selected Cell 1 and add a z value of “1”, and Cell 2 a z value of “2”. Now, during the adding of the Grid, the screen sizes had some values, which I didn’t change. I only change the values of the Cells in every screen, to match the same layout, Cell 1 first Cell 2 overlaid.
Curiously, screen size XL doesn’t bump. But, large, middle, small and XS sizes, design bumps.
I didn’t add the Column min height of 640, which resolved the issue in big screen wth my old layout without the Grid. I thought, well, let’s work form scratch with Grid Element.
OK, Reunel, now, I am asking again for your big help. You are the expert. I just began my long journey to enjoy GRID ELEMENT.
Thank you very much in advanced,
Can you explain further what do you want to do on your AAA limo page because when I check your page on desktop and mobile they are just looking great.
Hope that helps.
Good morning Marc, sure, I will explain;
Finally with Grid Element, I made the layout that I wanted, even though I have to compromise a little bit in the small screen sizes, where the Car do not overlay as in the big, keeping the same proportion.
My big issue is the bumping when changing pages. Everything on the top until the slideshow keeps position, but the overlaid Car, bumps down and up when changing in four screen sizes. Only the XL screen is good.
Thank you very much in advanced.
Before anything else, I must tell you that your layout did get more complicated because you have nested rows and columns inside a cell in a grid. Please be informed that you can actually insert the elements directly into each cell without having to insert a row element. Fewer containers will easily get the job done. You can actually set the grid as the main component of the section so that the layout containers will become section > grid > cell
You can change the builder settings in the Preferences while you are in the Pro Editor. Click the Gear icon on the left panel and a modal popup will display allowing you to set the “Content Layout Element”.
Why this is important? It is because to avoid complex layout and with fewer elements, we can easily set the layout that you want. To better assist you with your issue, kindly provide us access to your site so that we can check your settings and give you an example of a possible layout for your page. We also need to check your slider settings to prevent the page from jumping while loading the page. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
To know how to create a secure note, please check this out: How The Forum Works
I just created an example page for you. Check out the secure note below.
The page itself is using the section > grid > cell layout. The elements were inserted directly in each cell and also the image uses a negative top margin to make it overlap with the slider above it.
Hope this helps.
Good morning Ruenel, thank you for your work on the layout. I see how you did it. Thank you.
I couldn’t see you secure note.
Just two important details; if you see your layout, the first two images are too close, the overall proportion of the elements are different than mine, which is the one I want to achieve.
Second detail, if you reload your page, you will see how it bumps. Only issue in four screen sizes of my layout.
I will work on taking out some Rows and Column. Now, I wonder, maybe the bumping issue has something to do with any settings in the Header of Footer? Once I have this bumping solve, I will have the site almost done.
Thank you a lot for your time and effort to help.
1.) You can always adjust the image or even the gap between the cells. In the Grid settings, you can adjust the values for the “X and Y Gap” option.
2.) The movement of the page is the result of the overlapped image over the slider. As soon as the slider is loaded, the image moves up a bit to correct its position over the image. The movement can go away if we do not overlap the image over the slider which is not your desired layout.
Thank you Ruenel. That means no solution for the bumping.
Well, I took the bumping out of the XL screen. I also minimize the bumping in the L size.
I will continue playing around with the settings, so I can make the L stable, later the M, S and XS.
If I can make the L & M stable, that wuld be great for me, since the small and XS it not a problem, they can bump, and nobody sees it.
You are most welcome Bogar!
We’re just glad we were able to help you out in any way we can.