HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Question

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Currently, I'm having some trouble with the appearance of my website. Let me explain:

I've written some basic code (Please note that this code includes margins. I'm not sure if this is causing the issue) but the content doesn't display nicely on different screen sizes. Feel free to run the code in your browser to see what I mean:

HTML

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>

</head>
<body>

<nav>
        <ul>
            <h3 style="margin:15px;" class="logo">MYWEBSITENAME</h3>
            <li><a class="navlink" href="#">Home</a></li>
            <li><a class="navlink" href="#">About</a></li>
            <li><a class="navlink" href="#">Templates</a></li>
            <li><a class="navlink" href="/css-library">CSS Library</a></li>
            <li><a class="navlink" href="#">Updates</a></li>
            <li><a class="navlink" href="#">Downloads</a></li>
        </ul>
    </nav>


  <div class="content-left">
       <h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
       <h3 class="margin-para">Let me set things straight: clicking every download button for all our libraries can be tiresome. That's why we created something special called <em>Ocelot</em>. Ocelot combines all our libraries into one convenient package. Get ready for <em>ocelot!</em> - Current version: 1.0.</h3>
       <hr>

        </div>


  <div class="details">
        <h1>GET OCELOT</h1>
        <button class="button-greentheme">MORE INFO</button> <button 
class="button-graytheme">SAFE LINK IT!</button>
    </div>

<div class="content-left">
       <h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
       <h3 class="margin-para">Introducing the brand new CSS library - Bibrary. This is our first CSS library and it covers a wide range of buttons. Keep an eye on this one as it may receive updates as frequently as five times a year!</h3>
        </div>


  <div class="details">
        <h1>GET BIBRARY</h1>
        <button class="button-greentheme">MORE INFO</button> <button 
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
    </div>

</body>
</html>

I have specified margin-left:30px; and margin-right:30px; Please provide feedback if you disagree with this design choice.

html css

Answer 1

Answer №1

Consider utilizing the robust Bootstrap Framework as it is highly favored and widely used for creating responsive designs. Visit getbootstrap.com for further information and resources. Additionally, there are numerous helpful tutorials available on YouTube for mastering Bootstrap.

If you prefer a more straightforward approach without using a framework, explore the option of utilizing @media queries with pure CSS. Extensive documentation can be found through a simple search on Google.

Answer 2

Consider utilizing the robust Bootstrap Framework as it is highly favored and widely used for creating responsive designs. Visit getbootstrap.com for further information and resources. Additionally, there are numerous helpful tutorials available on YouTube for mastering Bootstrap.

If you prefer a more straightforward approach without using a framework, explore the option of utilizing @media queries with pure CSS. Extensive documentation can be found through a simple search on Google.

Answer 3

Answer №2

To implement responsive design, utilize media queries within your CSS stylesheet. An example of how to do this is shown below:

@media only screen and (max-width: 768px) {
    body {
        color: red;
    }
}

Answer 4

To implement responsive design, utilize media queries within your CSS stylesheet. An example of how to do this is shown below:

@media only screen and (max-width: 768px) {
    body {
        color: red;
    }
}

Answer 5

Answer №3

Here's a code snippet for you to try:

<!doctype html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/styles.css" rel="stylesheet" type="text/css">   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <meta charset="UTF-8">
      <title>Portal</title>

<style>
.content{
    border-bottom: 1px solid #000;
}
</style>


   </head>
   <body>

         <nav class="navbar navbar-default">
            <div class="container-fluid">
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand logo"  href="#">WEBLEARN</a>
               </div>
               <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                     <li><a class="navlink" href="#">Home</a></li>
                     <li><a class="navlink" href="#">About</a></li>
                     <li><a class="navlink" href="#">Templates</a></li>
                     <li><a class="navlink" href="/css-library">CSS Library</a></li>
                     <li><a class="navlink" href="#">Updates</a></li>
                     <li><a class="navlink" href="#">Downloads</a></li>
                  </ul>
               </div>            
            </div>          
         </nav>
         <div class="container-fluid">
            <div class="col-xs-12 content">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Owl <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">Interested in time management? Meet Owl - the library that combines all our resources in one place.
                     Get rid of the clutter and welcome efficiency with Owl! Current version: 1.0.
                  </h3>

               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET OWL</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     class="button-graytheme">CLICK HERE!</button>
               </div>

                </div>
               <div class="col-xs-12">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Zebra <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">Introducing Zebra - the latest CSS library launched by us. Covering a wide range of button styles,
                     Zebra promises to keep your design game strong. Stay tuned for updates as Zebra evolves over time!
                  </h3>
               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET ZEBRA</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     href="/zebra" class="button-graytheme">EXPLORE NOW!</button>
               </div>
            </div>
         </div>

   </body>
</html>
<script  src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 6

Here's a code snippet for you to try:

<!doctype html>
<html lang="en">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/styles.css" rel="stylesheet" type="text/css">   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <meta charset="UTF-8">
      <title>Portal</title>

<style>
.content{
    border-bottom: 1px solid #000;
}
</style>


   </head>
   <body>

         <nav class="navbar navbar-default">
            <div class="container-fluid">
               <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand logo"  href="#">WEBLEARN</a>
               </div>
               <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                     <li><a class="navlink" href="#">Home</a></li>
                     <li><a class="navlink" href="#">About</a></li>
                     <li><a class="navlink" href="#">Templates</a></li>
                     <li><a class="navlink" href="/css-library">CSS Library</a></li>
                     <li><a class="navlink" href="#">Updates</a></li>
                     <li><a class="navlink" href="#">Downloads</a></li>
                  </ul>
               </div>            
            </div>          
         </nav>
         <div class="container-fluid">
            <div class="col-xs-12 content">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Owl <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">Interested in time management? Meet Owl - the library that combines all our resources in one place.
                     Get rid of the clutter and welcome efficiency with Owl! Current version: 1.0.
                  </h3>

               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET OWL</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     class="button-graytheme">CLICK HERE!</button>
               </div>

                </div>
               <div class="col-xs-12">
               <div class="col-xs-12 col-sm-6 content-left">
                  <h1>Zebra <strong class="tag-greentheme">1.0</strong></h1>
                  <h3 class="margin-para">Introducing Zebra - the latest CSS library launched by us. Covering a wide range of button styles,
                     Zebra promises to keep your design game strong. Stay tuned for updates as Zebra evolves over time!
                  </h3>
               </div>
               <div class="col-xs-12 col-sm-6 details">
                  <h1>GET ZEBRA</h1>
                  <button class="button-greentheme">MORE INFO</button> <button 
                     href="/zebra" class="button-graytheme">EXPLORE NOW!</button>
               </div>
            </div>
         </div>

   </body>
</html>
<script  src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

HTML - What steps can I take to ensure my website displays appropriately on various screen sizes?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to create a div that horizontally scrolls and contains multiple other div elements?

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

When I log out and hit the back button, the PHP page continues to display without any changes

PHP consistently selects the final radio button element

Obtain an Element Using Puppeteer

Adjust the overall cost according to the quantity using jQuery or JavaScript

Icon-enhanced Bootstrap dropdown selection

A single feature designed to handle various elements

The layout of the keyboard in Cordova has been altered

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

Utilizing Selenium IDE and XPath to confirm that a checkbox is selected only when the associated label contains certain text

Maximizing performance with internal Bootstrap?

Issue: Unable to create the restangular module because: the variable '_' is not defined

Arranging input fields for different languages

Initially, my PDF file does not get selected, except in the Internet Explorer browser

CSS for Adjusting Parent Height Based on Child Content

The CSS property `touchmove pointer-events: none` appears to have a malfunction on Chrome for Android version 4.4 / ChromeView

The Oracle Apex Login Interface with a Touch of Customized Styling

I am looking to bring in just the tables from a different html/php page

script code to limit selection of dates within a predefined range