Bento Style with CSS Grid - Code Snippets CSS Grid Helper - Elementor Wordpress Tutorial

Подписаться 90 тыс.

Просмотров 3,4 тыс.

50% 1

Let's build some Bento Style with CSS Grid - Code Snippets CSS Grid Helper - Elementor Wordpress Tutorial
CSS Grid Helper = www.codesnippe...
Thanks to Mark Harris for the Code Snippet
Elementor Hosting - managed wordpress hosting :
be.elementor.c...
Elementor Pro - The builder that will make you a pro
be.elementor.c...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquad...
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your RU-vid Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 16

@zimsuk 7 месяцев назад

Thanks, it finally made me understand how to work with the grid 👍🏻👏🏻💪🏻

@StevanOvich61 7 месяцев назад

Wow, nice! 👍

@EamonnO-d7k 7 месяцев назад

Hey Imran, Thank you for the insightful video on CSS grid layouts. 👍👍 Could you or someone from the community kindly consider creating a follow-up video that demonstrates the application of this grid layout within a custom loop where the first five items in a custom loop can be effectively displayed using this grid layout?

@websquadron 7 месяцев назад

Interesting request. Let me have a think.

@ericuk9481 5 месяцев назад

Hello Imran hope you are doing good. Quick questions if you don t mind, How do you make your grid responsive for mobile ? Without hiding the grid ? Do you have any video on that matter ? Thank you

@websquadron 5 месяцев назад

You can add @media to modify the CSS spans, or just ensure that each grid is set to 1005 when it gets to the mobile breakpoint.

@ericuk9481 5 месяцев назад

@@websquadron thank you Imran

@TheEpetecain 4 месяца назад

Hi Imran, insightful video! I have a question: anyone know how to get rid of of "g6"? You can see the dotted box (which it's empty) on all versions (desktop/tab/mobile). I mean, theres's a "blank space" below and I don't know how to remove it.

@websquadron 4 месяца назад

It should disappear. If not then add a container set to 0 height inside.

@sproksch87 7 месяцев назад

hey, thank you very much for the video. Can you or someone from the community explain to me what the advantage of the CSS Grid is over the alternative to the Flex Box container? Thank you very much and greetings from Stuttgart (Germany)

@websquadron 7 месяцев назад

No disadvantage depending on how you build it - and like with Flex you will need to adjust for the tablet/mobile. Grid can make it easier to compartmentalise items or areas of the page.

@lucianpascu8445 6 месяцев назад

Grid is mostly for layouts (complicated ones) and Flex mostly for content or simple layouts. Sometimes you will combine them.

@QuaverloveStudio 7 месяцев назад

Sound!

@QuaverloveStudio Месяц назад

Hey, Imran. I just ran into a bit of difficulty with the CSS Grid bento layout: It shows perfectly in the editor, but when I preview it live, it doesn't have the styling... just a normal left-to-right and then on to the next row... I've tried it on all the browsers I have installed... same thing. Have you come across this before?