-
AuthorPosts
-
January 22, 2022 at 11:46 am #1336627
Hi,
For some reason, there seems to be margins on my page (link in bio) the last element is a Grid Row but I can’t seem to get rid of the bottom spacing. Could you please help me remove this margins? Thank you!
January 22, 2022 at 11:58 am #1336632This reply has been marked as private.January 22, 2022 at 2:32 pm #1336652Hi,
Thanks for the screenshot. I can’t reproduce those results on my end though, the footer begins directly after that section, and there are no exact margins between them. Did you manage to find a solution? If not, then please try loading the page in a private or incognito browser window to see if that helps.
Best regards,
RikardJanuary 22, 2022 at 2:41 pm #1336656Strange, I cleared cookies and cache but looks weird on Safari still. Is there any way we can fix that? It looks ok on Chrome. However, the mobile view looks too small. It should be 40% of browser height but it is not doing so for mobile. Please advise. Below is screenshot. Thank you!
January 24, 2022 at 4:46 am #1336814Hi,
Thank you for the screenshot.
Adding this css code should help with the height issue.
@media only screen and (max-width: 989px) { .responsive #top #wrap_all .av-flex-cells .no_margin { height: 100% !important; overflow: hidden; } }
If the same css media query already exists, you can just copy the css rule within and place it inside the current css media query.
Best regards,
IsmaelJanuary 24, 2022 at 5:09 am #1336819Thank you. How can I fix the way it’s displaying on Safari? It looks ok on every other browser but safari.. Thank you
January 24, 2022 at 5:46 am #1336837Hi,
The same css code should work on Safari. Make sure to keep the file compression settings disabled while editing the site and please do not forget to purge the cache.
Best regards,
IsmaelJanuary 24, 2022 at 12:20 pm #1336885Thank you, that fixed the view on the mobile view. However, on Desktop view on Safari, it still has weird margins at the bottom, I want it to directly go to footer. It goes directly to footer on Chrome? Please advise.. Link is in private. Thank you!
January 24, 2022 at 2:30 pm #1336904Hi, please see attached video in the private. The spacing really seems to only be on Safari and not any other browser but looks ok on every other device.
On Desktop on Safari, we need to remove that extra spacing below the Grid container when using CSS with aoki-template_image-button. You can see that the hover effect starts when hovering the extra space. Please advise..
January 24, 2022 at 2:31 pm #1336905That gird container should lead directly to the footer and hover only on the image like it does on Chrome. Thank you!
January 25, 2022 at 8:40 am #1336987Hi,
Thank you for the update.
We cannot figure out why it resizes like that on Safari but we can see that the cell is not inheriting the full height of the grid row container. Have you tried replacing the Grid Row element with a Color Section? You should be able to reproduce the same layout using the Color Section elemen and it might get rid of the height issue with the grid row cells.
Best regards,
IsmaelJanuary 25, 2022 at 12:46 pm #1337052Hi,
Unfortunately, when I try to replicate it on a color section, the CSS attribute “aoki-template_image-button” does not work. As you can see I currently have an effect but it doesn’t work on a color section. Could you help me with this then? Thank you.
January 25, 2022 at 6:04 pm #1337129Hi,
Could you please try adding following code to Quick CSS field in Enfold theme options > General Styling tab and check if that helps?
.aoki-template_image-button .flex_cell { padding: 0; }
Best regards,
YigitJanuary 26, 2022 at 11:56 am #1337248Yigit! Awesome! It worked and there now is no spacing from hooter and the gird row. Thank you so much!
January 26, 2022 at 12:39 pm #1337255 -
AuthorPosts
- The topic ‘Margin on grid row’ is closed to new replies.