The Secret to be Mobile Friendly in 10 Minutes | Truly Responsive Web Design

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ธ.ค. 2024

ความคิดเห็น • 113

  • @JackintheNet
    @JackintheNet  ปีที่แล้ว +4

    Hope this video has helped you, to understand more about how to use rems to make your site mobile friendly check this out: th-cam.com/video/EPyyo7EPkyA/w-d-xo.html

    • @caliseleste1088
      @caliseleste1088 ปีที่แล้ว

      Hello. Appreciate your video. What site would you recommend for building both mobile and desktop site? Thank you.

  • @milo_thatch_incarnate
    @milo_thatch_incarnate ปีที่แล้ว +7

    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.

  • @junkonatsumizaka5149
    @junkonatsumizaka5149 ปีที่แล้ว +4

    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.

  • @JulaWeg
    @JulaWeg 3 ปีที่แล้ว +4

    Jack, I feel like an explorer who has found something very valuable. Your collection is a treasure!!!

  • @alindaalvin8049
    @alindaalvin8049 ปีที่แล้ว +5

    You're the best tortorial teacher.

  • @cornishfudge39
    @cornishfudge39 10 หลายเดือนก่อน

    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!

  • @MindblowQuotes
    @MindblowQuotes 3 ปีที่แล้ว

    Oh Gosh! After many months of struggles. BOOM Jack shows it. Thanks, man. Thumbs up!

  • @friendofnature1662
    @friendofnature1662 8 หลายเดือนก่อน

    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❤

  • @Lord_of_the_jig
    @Lord_of_the_jig ปีที่แล้ว

    This is the first yt coding tutorial from which I’ve actually learnt something❤️ thank you 😊

  • @CDArnoldMusic
    @CDArnoldMusic 2 หลายเดือนก่อน

    Thanks a lot! That change away from pixels was the trick!

  • @Jonathan_Solomon
    @Jonathan_Solomon ปีที่แล้ว

    Best video I've found on this topic. Love how you went straight to the point -- Thanks for this!

  • @jokotoyebabatunde5780
    @jokotoyebabatunde5780 ปีที่แล้ว

    wow, how come I never knew this all these years. Thank you so much

  • @MDTAKRIB-UL-KADIR
    @MDTAKRIB-UL-KADIR ปีที่แล้ว +1

    thank you for this informative video. it was very helpful. hope to get more hopeful video from you. bless you jack.

  • @SPDBIKER
    @SPDBIKER ปีที่แล้ว +1

    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.

  • @MatthewFurman
    @MatthewFurman 3 ปีที่แล้ว +21

    Jack, this video is incredible. So clear and informative. TBH, I have never seen anyone tackle this before. Great job! Makes sense, I'm going to stop working in pixels. Sound quality 👌 Haircut 👍

    • @JackintheNet
      @JackintheNet  3 ปีที่แล้ว +3

      Thanks Matt. People often shy away from it because it involves html and css but you can control it easily with themes, Gutenberg or page builders now. And it's so much easier to keep things responsive across devices. BTW you weren't wrong, the Rode WG2 is great.

  • @DrRussell
    @DrRussell ปีที่แล้ว

    How do you only have 7k subs? Your content is so valuable! Thank you Sir.

  • @MeganEnge-p6u
    @MeganEnge-p6u ปีที่แล้ว

    Absolutely incredible. I wish I would have known this sooner!!! THANK YOU!

  • @luandesign3300
    @luandesign3300 2 ปีที่แล้ว +4

    I am really thankful for your video, I was struggling with responsive modes and sizes. I'm building my graphic designer site for my own, trying to build in elementor, and from time to time I have some issues which I wasn't getting how to figure out... I used to use pixels to re-size all, so when I first start to use my site on my cellphone I take a shock, realize that all the measures blow off... This video save me, I wasn't able to figure out what in the god damn I was supposed to do to size all in a responsively way. Huge thanks from Brazil!

  •  3 ปีที่แล้ว

    Jack, this video is an eyes opener. Amazing. Thanks

  • @PamelaV-yj7tz
    @PamelaV-yj7tz หลายเดือนก่อน

    great explanation. So simple and so to the point.

  • @ahmednaji5763
    @ahmednaji5763 8 หลายเดือนก่อน

    Well explained! Very clear and concise explanation

  • @vtk_jnr
    @vtk_jnr ปีที่แล้ว

    Love clear precise videos as such. Subbed

  • @souravchowdhury4748
    @souravchowdhury4748 2 ปีที่แล้ว

    Very clear bro. First time watching and i loved it. 😊😊

  • @CarterWilson-d1v
    @CarterWilson-d1v ปีที่แล้ว

    wow, that was immensely helpful thank you

  • @fabiorinaldi3285
    @fabiorinaldi3285 8 หลายเดือนก่อน

    Thank you, Luka Dončić!

  • @NathalieHennequin
    @NathalieHennequin 6 หลายเดือนก่อน

    just excellent, so clean & user freindly

  • @JScarz10
    @JScarz10 ปีที่แล้ว +1

    Great video, thank you.

  • @ikechiude
    @ikechiude ปีที่แล้ว

    The best video on elementor😊

  • @creekchub9714
    @creekchub9714 ปีที่แล้ว

    thanks. really liked the way you broke it down and explained quickly. gonna try and implement this tommorow to my project 🙂

  • @jenniferward6821
    @jenniferward6821 3 ปีที่แล้ว

    Oh wow. At last. Tuts should start with this info. Thank you.

  • @MiuArtStudioUK
    @MiuArtStudioUK ปีที่แล้ว

    Thank you, this is very helpful!

  • @Blogger.Boy00
    @Blogger.Boy00 2 ปีที่แล้ว

    This was very helpful. Thank you.

  • @danielalmas9647
    @danielalmas9647 3 ปีที่แล้ว +1

    Jack,
    I just found this video and it has been the easiest to follow and understand. I just subscribed and I will start watching all your videos!! Defaults in Elementor is next. Thanks for making it so clear and understanding!!

  • @chingm7442
    @chingm7442 3 ปีที่แล้ว

    Thank you Jack for another awesome video!

  • @yacine_der_deutscher2136
    @yacine_der_deutscher2136 ปีที่แล้ว

    You're the best 😊

  • @andreen888
    @andreen888 3 ปีที่แล้ว +1

    Now I know! Thanks, Jack

  • @oukhabbouaya
    @oukhabbouaya ปีที่แล้ว

    Thank you sooo much that really help me a lot 🙏🙏

  • @antjekeyser
    @antjekeyser 3 ปีที่แล้ว +1

    That made my day. So super explained and everything to the point. I am absolutely thrilled. Thank you for your valuable content. 😊👏

  • @arpanvir4344
    @arpanvir4344 ปีที่แล้ว

    bro you helped me alot... thank you soooo much

  • @elle381
    @elle381 2 ปีที่แล้ว

    You're a hero.

  • @Andrew-C-Witham
    @Andrew-C-Witham 3 ปีที่แล้ว

    Mystery solved. Thank you for clear explanation.

  • @cath.lamontagne5357
    @cath.lamontagne5357 3 ปีที่แล้ว

    Wonderful explanations- very clear!

  • @aliciacatherineegan
    @aliciacatherineegan 11 หลายเดือนก่อน

    Thank you!!!

  • @yogawithekaterina
    @yogawithekaterina 2 ปีที่แล้ว

    Thank you so much! Finally a really valuable channel! +1 subscriber! Great job👌

  • @alyaabe8337
    @alyaabe8337 3 ปีที่แล้ว

    super super helpful, thank you for sharing this!

  • @bhanujamitra2697
    @bhanujamitra2697 2 ปีที่แล้ว

    Thank you so much Jack, this was really very helpful.. :)

  • @DiDi-el9sl
    @DiDi-el9sl ปีที่แล้ว

    дякую, субтитри дуже гарно переклали

  • @klimaxhealth
    @klimaxhealth 2 ปีที่แล้ว

    You baffled me with mathematics, but I got it, thank you.

  • @manojparthiban2540
    @manojparthiban2540 2 ปีที่แล้ว

    Thank you so much jack

  • @Sonya_Makepeace
    @Sonya_Makepeace 11 หลายเดือนก่อน +1

    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.

  • @nurmohammad8128
    @nurmohammad8128 7 หลายเดือนก่อน

    thank you so much

  • @yaraa9003
    @yaraa9003 3 ปีที่แล้ว +1

    I'm using blocksy theme and gutenberg, the problem when I make changes in blocksy customization the page be mobile friendly and when I come back to gutenberg the page doesn't be mobile friendly. Specially, the blocks that I made with gutenberg doesn't have all the measurement options. What can I do ?

  • @Jhnpog
    @Jhnpog ปีที่แล้ว

    Thank you.

  • @WladzislawZagrewsky
    @WladzislawZagrewsky 10 หลายเดือนก่อน

    Thank you)

  • @darlenecorreia5773
    @darlenecorreia5773 ปีที่แล้ว

    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.

  • @mihalyfreeman5928
    @mihalyfreeman5928 2 ปีที่แล้ว

    Where is the you spoke about at 2:41?

  • @patsymutiso
    @patsymutiso 3 หลายเดือนก่อน

    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?

  • @hakiminzubir2046
    @hakiminzubir2046 3 ปีที่แล้ว

    Thank you for informative content, appreciate it

  • @rohitchahal9768
    @rohitchahal9768 9 หลายเดือนก่อน

    which software you used for demo in this video

  • @rebelinc
    @rebelinc 3 ปีที่แล้ว

    To the point information! Great

  • @audunjemtland8287
    @audunjemtland8287 ปีที่แล้ว

    Amazing tutorial. Best one yet.
    Thought It's still a mess over here. Doesn't come out well proportoned like yours. Text is scattered everywhere. Same with buttons.

  • @JeramieSaito
    @JeramieSaito ปีที่แล้ว

    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.

  • @ryun3307
    @ryun3307 3 ปีที่แล้ว

    Well needed input

  • @MrVonHolland
    @MrVonHolland 3 ปีที่แล้ว

    REM, great band!

  • @Realestatewithalissa
    @Realestatewithalissa ปีที่แล้ว

    Thank you for the video. it really helped understand. I do have a big question though. I switched to that and for some reason mobile and tablet still looks bad and buttons are on top of each other. Do you do any zoom training or can you tell me how to fix that. I tried everything

    • @JackintheNet
      @JackintheNet  ปีที่แล้ว

      Hi, thanks for the comment. I do zoom coaching, yes, but have you watched this video yet? It expands upon this and might help solve your problem: th-cam.com/video/EPyyo7EPkyA/w-d-xo.html

  • @spydergs07
    @spydergs07 3 ปีที่แล้ว

    This is awesome!
    I was wondering why all of my mobiles were so jacked.
    I was using EM for all of my sizes.
    Trying to edit my site now!
    Thanks again!

  • @SUPSHAINE
    @SUPSHAINE 7 หลายเดือนก่อน

    This is useful

  • @jakobs.family.computer
    @jakobs.family.computer 2 หลายเดือนก่อน

    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

  • @slicknickm8762
    @slicknickm8762 ปีที่แล้ว

    What html & css editor are you using in this video? Thank you.

  • @LIMIEDOT
    @LIMIEDOT ปีที่แล้ว +1

    Love the video! Truly helped with my understanding of how all of this works. I'm using the Pendant theme, and changed from px and em to VH and %, but parts of my mobile site are still giving me issues. The font size and a few other elements are still funky. 😣 I have no clue what to do now to make it mobile-friendly. Ugh.

    • @JackintheNet
      @JackintheNet  ปีที่แล้ว

      Thanks for watching. Try this as a build on from it: th-cam.com/video/EPyyo7EPkyA/w-d-xo.html might help with the issues you’re having

  • @jgz2
    @jgz2 3 ปีที่แล้ว

    Thanks Jack

  • @BestPropertyDealz
    @BestPropertyDealz 2 ปีที่แล้ว +1

    You didn't put the link to the global settings in the description.

  • @songfantasy670
    @songfantasy670 3 ปีที่แล้ว

    Very insightful. Does this apply to landscape mode as well. I made corrections to the spacing in the mobile portrait mode of the website that are not applying to the landscape mode.

  • @leeboss100
    @leeboss100 3 ปีที่แล้ว

    Have you the link for global setting video?

  • @nidaa3233
    @nidaa3233 3 ปีที่แล้ว

    The new look suits you Jack!! It would be great if you make a little more detailed tutorial.

    • @JackintheNet
      @JackintheNet  3 ปีที่แล้ว

      Thanks :) I'll do some further videos on it, this is as a good starter for people

  • @vocalhunt9122
    @vocalhunt9122 2 ปีที่แล้ว

    Howcome you tell us to use EM or REM for fonts and then you use VW yourself? 👀 really curious about this though, since It takes way too much time when using pixels

  • @amr9186
    @amr9186 2 ปีที่แล้ว

    hi jack .. when i am making any header adjustment on mobile its also changing on desktop .. really annoying please help

  • @akhielsewpal7371
    @akhielsewpal7371 2 ปีที่แล้ว +1

    Being struggling with responsive sites cause of the sizes this makes me feel stupid cause it's so easy🤣

  • @srl-svector
    @srl-svector ปีที่แล้ว +1

    best trick thanks

  • @swithinegwuchim481
    @swithinegwuchim481 2 ปีที่แล้ว

    This did not work from me. I used VH and VW to size everything. Still, the page would only look good on some mobile devices but not on all. I ended up having to use the preset sizes and positions (eg Center Center and Cover). Does anyone have an idea of what might have went wrong? Would appreciate an explanation.

  • @VideoNash
    @VideoNash ปีที่แล้ว

    thanks

  • @thetravelbloggersa
    @thetravelbloggersa 2 หลายเดือนก่อน

    Can you design an entire HTML website inside elementor without using any plugins

  • @waawaaweewaa2045
    @waawaaweewaa2045 2 ปีที่แล้ว

    wordpress is trying to charge me a yearly fee to use free plugins (like elementor). Is there any way around this? How would I go about using a free version of elementor if I dont have a wordpress subscription? Thanks.

    • @friendofnature1662
      @friendofnature1662 8 หลายเดือนก่อน

      The only cost of your site is the hosting!! And what ever plug in YOU want to buy!

  • @brantazconflix3873
    @brantazconflix3873 ปีที่แล้ว

    Please create for blogspot version, sir. 😊

  • @rrp7457
    @rrp7457 3 ปีที่แล้ว

    I am looking forward to watching more tutorials on Gutenberg. Do you have a framework created allowing users to follow a structured journey for learning. Certainly many will watch segments and other explore other content in their quest to become competent. Still, having a basic trusted structure to refer to is beneficial. Why not copy the architectural modeling Gutenberg follows? Enable users to assemble learning blocks in a path for learning, adding or deleting video content as they wish. Create a space where other trainers can add approved content. All of these could easily be monetized. Chuck

    • @JackintheNet
      @JackintheNet  3 ปีที่แล้ว

      Hi thanks for your comment. I do have learning courses including gutenberg these will be live shortly on my website.

  • @zacharycharmaine5903
    @zacharycharmaine5903 2 ปีที่แล้ว

    Hey, how do you do this on namecheap? No one uses whatever stupid garage thing you have

  • @QaziShaharyarAkhter
    @QaziShaharyarAkhter 3 ปีที่แล้ว

    Very well

  • @muziekmindtwister
    @muziekmindtwister ปีที่แล้ว

    2:25 sooooo, where is the link?

  • @serpantinthewild
    @serpantinthewild 3 ปีที่แล้ว +1

    Does gutenberg has these options?

    • @JackintheNet
      @JackintheNet  3 ปีที่แล้ว

      Yes I’m using both elementor and Gutenberg in the video. Gutenberg works well with it

  • @jakobs.family.computer
    @jakobs.family.computer 2 หลายเดือนก่อน

    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)

  • @akashshrestha01
    @akashshrestha01 3 ปีที่แล้ว

    great

  • @jayesh1891
    @jayesh1891 ปีที่แล้ว

    I was learning wp thru udemy and mf didn't tell me to use vh,vw and % instead just kept going with px

  • @getonlinetools
    @getonlinetools 2 ปีที่แล้ว

    Thanks ...
    But You Said below ... Where is the global setting video ?

  • @Drumming333
    @Drumming333 3 ปีที่แล้ว

    This looks promising. Thanks for this great tutorial. I'm noticing my elementor pages are not passing the google mobile friendly test, and two errors always appear: 'text too small to read', and 'clickable elements too close together'. Note: I just managed to get one site to pass the test by making body text larger, I believe 20px, and creating more space in the footer links by using the WP footer (not elementors template). These solutions appear obvious, but they were not working very well before. I'm not really sure what changed, tbh. I did not make any of changes mentioned in this vid, but I will give it a go on other sites. My other sites are way more complex... we'll see.

  • @damiengoldsmith2544
    @damiengoldsmith2544 2 ปีที่แล้ว

    Fucking awesome!

  • @VictoriaAHamilton
    @VictoriaAHamilton ปีที่แล้ว

    I pray this works

  • @erikaruiz7618
    @erikaruiz7618 7 หลายเดือนก่อน

    🙏💖☀️

  • @sdwsom4287
    @sdwsom4287 2 ปีที่แล้ว

    But wait...... there is no iPhone 10......

  • @inside6471
    @inside6471 2 ปีที่แล้ว

    Elementor is horrible for full responsive and this video did not help me at all

  • @samdairies2801
    @samdairies2801 8 หลายเดือนก่อน

    long story short we are supposed to use VH for sizing all the site, right?