This is how to make your WordPress website responsive – no code, it’s easy. TIMESTAMPS 
Watch the next video in my mobile friendly web design here:
In this WordPress Tutorial, I’ll show you how to make your website mobile-friendly in 10 minutes automatically, no more messing around with fonts, margins, padding or the rest. Ever wondered about px em rem vw vh in Elementor, Gutenberg or other page builders? Or just simply want to know how to design something that is automatically responsive and looks great on desktop, laptop, tablet and mobile. This is how to do it – and don’t worry, you don’t need to know css or html code, this is for beginners and can be done with Gutenberg or the major page builders like Elementor.
SUBSCRIBE & HIT THE to turn on notifications & never miss a new upload!
TIMESTAMPS
Responsive Web Design (00:00)
Absolute Units or Relative Units (00:40)
Font Size (01:05)
Changing Default Font Size (02:10)
PX EM REM VW (02:40)
VH and VW viewport height and width (03:28)
Percent % columns, margins and padding (04:45)
How to use these relative units for mobile-friendly web design (05:19)
Thanks for watching, make sure to comment! And who do you know that would benefit from this tutorial? Spread the love, share this with them.
Get Elementor (free or pro) —
Jack in the Net
#wordpress #jackinthenet #jackduel #elementor #gutenberg
Affiliate Disclaimer: This video & description contains affiliate links. If you buy a product through this you won’t pay any extra, but I get a small commission. Thank you for that support it really helps to keep making free video tutorials.
Hope this video has helped you, to understand more about how to use rems to make your site mobile friendly check this out: https://youtu.be/EPyyo7EPkyA
Hello! I have just come across your channel – SO helpful, thank you! I am wondering if you have a video explaining how to get a video on the home page to be responsive from desktop to mobile? Help LOL!
It looks amazing on my laptop, but won't even play on a Mobile phone at the moment – so I have definitely gone wrong somewhere….
Bro thank you so much
very helpful, concise and clear. I just subscribed (p.s. what is the repeating ticking/clicking sound in your video, its really distracting?)
OMG! This has been driving me crazy for so long, and finally you make it crystal clear. Thank you!
Thank you, This video was invaluable.
great explanation. So simple and so to the point.
I still say win98 and Netscape navigator was the best era. It may be nostalgia, or it may be that everything is dumb now except for me and probably this guy
He said 10 minutes but then he did it in 6. You're hired. As long as I can pay you by the hour. (I think that's how the joke would work? Idk, thx tho)
Can you design an entire HTML website inside elementor without using any plugins
Thanks a lot! That change away from pixels was the trick!
I'm building a WordPress site using the Spectra page builder and the Astra theme. When I go into the settings to change the font sizes from px to rem, I can see the changes as I edit. However, once I publish the changes, all fonts become so small you can't read them. I don't know why this seems to break the site. Any ideas?
Using Astra & spend multiple hours asking chatgpt to give me code to adjust astra to get this to work on there, and it's still not working.
just excellent, so clean & user freindly
thank you so much
This is useful
It is that time after having made an update where you think a plug in must have ruined your site.
nobody tells you in so many courses I have done! this so valuable information. Thank you
Well explained! Very clear and concise explanation
long story short we are supposed to use VH for sizing all the site, right?
Thank you, Luka Dončić!
which software you used for demo in this video
Wow thank you. Been searching for this video. I have very simply adjusted my website to mobile friendly. I litterally used the % and it worked!
Thank you)
Thank you!!!
How do I do this using Gutenberg? Every time I make a different layout for mobile, I get the same layout on desktop. I know it can be done easily with Kadence, but I prefer using blocks.
Thank you.
How do you only have 7k subs? Your content is so valuable! Thank you Sir.
bro you helped me alot… thank you soooo much
Thank you SO MUCH! I've been struggling with a new website that was supposed to be 'responsive' since I've never worked with mobile or tablet layouts before. I was taking quite a bit of time to make each section three times, one to be visible on tablet, desktop, and mobile, and then resizing everything for hours.
After two days, I found your video. You've saved me countless hours.
thanks
Quick question, are you say that everything on the site should be set to 5 vw? Sections, containers, texts, images and videos? I'm using Elementor Pro and i'm not seeing vh anywhere.
дякую, субтитри дуже гарно переклали
best trick thanks
Thanks for a great video. I've been struggling to get the display correct across devices and this has finally helped me do it without just trying to guess.
Best video I've found on this topic. Love how you went straight to the point — Thanks for this!
thanks. really liked the way you broke it down and explained quickly. gonna try and implement this tommorow to my project
You're the best
Hi Jack this is good but my site was not built using an elementor. And a picture I put on the site will be the same picture across mobile devices and it is not working. My images are being cropped out on the mobile. Please help.
wow, that was immensely helpful thank you
I have been tearing my hair out over how unresponsive to mobile mode my site is… and now I think I have the solution, thanks to your video! I'm still tearing my hair out over the fact that I'm going to have to go through my WHOLE SITE and change everything away from pixels… but at least I have a solution. Sigh.
Absolutely incredible. I wish I would have known this sooner!!! THANK YOU!
2:25 sooooo, where is the link?
Please create for blogspot version, sir.
The best video on elementor
I was learning wp thru udemy and mf didn't tell me to use vh,vw and % instead just kept going with px