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.

htmlcss

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with accessing the upvote/downvote input within a Django template

Currently, I'm trying to retrieve upvote/downvote data from a Django template in the following manner: <form method="POST" action="{% url 'vote' %}" class="vote_form"> {% csrf_token %} <input type="hidden" id="id_value" name="valu ...

htmldjangodjango-formsdjango-templates

Steps to gather all the images within a directory

Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...

javascriptjquerycssbackbone.js

Is there a way to drop a pin on the Google Maps app?

Is there a way to pinpoint the specific location on Google Maps? <google-map id="map-container" width="100%" height="100%" class="maps"></google-map> ...

htmlcssangulartypescript

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

javascripthtmlarraysvue.jsvuejs2

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

javascripthtmlcss

Changing the height of a table row using CSS transitions

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

csscss-transitionscss-tablesrow-height

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...

javascriptjqueryhtmlangularjs

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

htmlcssreactjstailwind-css

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

htmltypescriptckeditorangular2-forms

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

javascripthtmlcss

Activate night mode in ElementPlus using CDN

Is there a way to set the theme to dark in ElementUI + Vue when using CDNs instead of npm? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> ...

javascripthtmlvue.jselement-uielement-plus

Tips for creating horizontal scrolling in the div element

I'm working with a div element that looks like this: <div id="tl" style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;"> <div id='demo' style="float:left;height ...

jqueryhtmlcss

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

javascripthtmliframe

Adaptable bootstrap placement

I have created a form that includes a custom checkbox element. The issue is that the label for the checkbox is not vertically aligned with the checkbox itself. How can I adjust the label to be vertically centered with the checkbox? You can see the code ...

htmlcssbootstrap-4

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

I am currently working on creating a basic login page using node.js with the express.js and mysql packages. The goal is to redirect users to the layout.html page if their username and password exist in the mysql database. For this project, I have set up a ...

javascripthtmlmysqlnode.jsexpress

I'm looking to mirror images within the Bootstrap framework - any suggestions on how to achieve this using jQuery

When hovering over the image, it should flip to reveal text or a link: <div class="clearfix visible-xs"></div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="speaker-item animated hiding" data-animation="fade ...

jquerycsshtmltwitter-bootstrap

Attempting to showcase the information in my customized SharePoint Online list through a Web Part Page utilizing AngularJS

<script> //AngularJS Code goes here var appVar = angular.module('listApp', ['ngRoute']); appVar.controller("controller1", function($scope){}); function FetchEmployeeData($scope, EmployeeList){ var reque ...

javascripthtmlangularjsajaxsharepoint

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

focusing on two different sections with a single hover effect

Is it possible to modify the styles of two different divs using CSS when hovering over one div? #down-icn { position: absolute; bottom: 0; right: 25px; color: #fff; -webkit-transition: color 0.25s ease; border-color 0.5s ease; -moz-transition: colo ...

htmlcss