WordPress Responsive Design in 2024 - the good and the bad!

[@DiegoPereyra]

Cool... I´m enjoying your channel very much, great presentation and delivery. Thank you!

[@wpjakson]

Thanks ver much Diego! Appreciate that!

[@calebmatteis9155]

This is awesome!!! Jakson thank you, sir.

[@wpjakson]

You're super welcome Caleb! Thanks!

[@visualmodo]

Really good content!

[@vishalmukadam]

When I watched your previous video about Transparent background with Twenty Twenty Four Theme, I choose to go with CSS way to do it but when I check the responsiveness it was breaking so added additional CSS.

[@wpjakson]

Great Vishal, glad you had success with adapting it!

[@Whatreally123]

Hi, I created a custom block using one of the core blocks. Added few extra lines of code generated from ChatGPT. I am no developer. However, the plugin folder is huge around 250mb. the zip file is itself around 70mb. I created the custom block locally on WP Studio and VS Code. How do I export the plugin to be installable but not be so huge in mb?

[@wpjakson]

Ooo, that does sound way to big @Whatreally123 - what was was the blocks functionality and purpose?

[@Whatreally123]

@@wpjakson i just modified the Post Title block to just fetch the first 2 words of a title. So when I use it in a query loop, it looks cleaner in some specific purpose. However, I think I zipped the entire plugin folder. Src, build etc. so not sure if that was the correct way.

[@Sonya_Makepeace]

I want to be able to use a certain Hero image for desktop, then a different one for tablet and phone. But this isn't possible using the block theme.

[@wpjakson]

Hey Sonya, you can achieve this by using this plugin wordpress.org/plugins/block-visibility/

[@Sonya_Makepeace]

@@wpjakson Thankyou - I will give it a try. I've tried using my own media queries in CSS but I haven't got it to work yet.

[@GodCenteredTheology]

If Wordpress ever adds a good-working responsive controls like Spectra I will never use anything else except core.

[@JimKernix]

Every CSS rule has !important? I don't think that's good.

[@wpjakson]

Hey Jim, yes, it doesn’t look great on paper - but due to how the block editor adds inline CSS to the actual HTML markup (which is epic for all sorts of reasons btw) we need the !important for this solution so it can override those inline styles and we can take control of the styling - its a great use-case and one of the main reasons we have !important in CSS i.e. to be able override stuff we can’t otherwise control.