Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree2Likes
  • 1 Post By ragnar

Thread: HTML & CSS - a responsive website

  1. #1
    Junior Member
    Join Date
    Jul 2017
    Posts
    1
    Member #
    56958

    HTML & CSS - a responsive website

    Hello webdesignforums' members

    I'm a beginner front-end web developer and I have been self-teaching myself for 2 months now. I can write a bit of HTML and CSS. I've finished my homepage but let's move to the problem now. How to make it responsive? I don't really understand how to make it responsive? Where should I start? If you have any recommendations could you please write them below?

    HTML: https://pastebin.com/Z6vCRvah
    CSS: https://pastebin.com/Dyw6SBr5

    Note: CSS is a bit messy but I hope it's understandable.

    (Sorry for that bad english)
    Best wishes
    Marmets
    Last edited by Marmets; Jul 05th, 2017 at 05:23 AM.

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2017
    Location
    United States
    Posts
    7
    Member #
    56979
    Thank you for these insights. I'm not a web developer, bu I have found good insights with your thoughts.

  4. #3
    Member
    Join Date
    Jul 2017
    Location
    south africa
    Posts
    41
    Member #
    57012
    Liked
    6 times
    i am also self taught , the best way i found was through media queries , as steve mentioned it took me a while to get the hang of it , this basically tells the website that if the screen width is lower than x amount and higher than y amount ( follow this new set off css rules ), and those css rules will be different for the view-port size ...

    Google Media queries i think this is the standard approach by all web developers,
    also there is a way called "fluid grid layout" of which i dont have much knowledge.

    Something that worked for me ....
    Open your website in developer tools like chrome then resize it until things start going bad ...
    set a media query for that view width ..
    then in developer mode adjust the css until all looks good ..
    copy it and paste it into you media query ...
    then resize further and repeat until you get to 320 width,

    another thing get into the habit of using vw and % to set heights ,widths and margins it will help with the scaling process until thing get too small then you use media queries.

    Just google them there are tons of tutorials online.

    Let us know how you fare
    Good luck
    Last edited by ragnar; Jul 18th, 2017 at 10:33 AM.
    Gielakar likes this.

  5. #4
    Junior Member Gielakar's Avatar
    Join Date
    Jul 2017
    Posts
    4
    Member #
    57050
    Thank you very much! I also just started to study this question. Frankly speaking, I have questions, but I found a couple of answers for myself. In addition, I want to share the excellent information about the bootstrap from https://www.templatemonster.com/blog...-system-guide/ Here it is written in some detail, it may help someone. Good luck!
    Last edited by Gielakar; Jul 19th, 2017 at 08:27 AM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:46 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com