Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen size and isn't effective. Seeking help as a beginner programmer who would greatly appreciate any guidance.

// Navigation Bar Underline
$("a").click(function(){
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 });
@font-face {
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
...
        <div class='romf'>Rsdfadkin.</div>>
      </div>
      <div class='bio'>
          <img class = 'rndface' src="rndface.png" alt="Missing File">
          <p class='topname'>
            <h1>Rdkin.</h1>
          </p>
          <p class='school'>
            Negh School
          </p>
          <p class='interests'>
            EnginScience
          </p>
          <p class='location'>
            Chicaois
          </p>
          <p class='mail'>
            framail.com
          </p>
          <p class='num'>
            (845504
          </p>
          <p>
            <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
            <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
          </p>
          <p>
        </div>
        <div class='aboutfront'>
              <h2 class='abt'>
                About
              </h2>
              <p class='myback'>
                MY BACKGROUND
              </p>
              <p class='abtme'>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
                beatae molestias eaque repudiandae nulla error veritatis 
                illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
              </p>
        </div>
        <footer class='footer'>
          <p>
            © 2020 By Rodsfadkin.
          </p>
        </footer>
      </body>
    </html>
javascripthtmljquerycss

Answer №1

Utilize the @media tag within the same script, as shown below:

The correct way to implement this technique !!

@media only screen and (max-width: 600px) {
   body {
      background-color: lightblue;
   }
}

By using this code snippet, the page's background will change if the viewport size is smaller than 600px.

If the main CSS file is linked in this manner:

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />

You can update it to the following:

<link rel="stylesheet" type="text/css"  href="style.css" />

Answer №2

To achieve the desired result, you need to utilize media queries within your stylesheet. Specifically, at the end of the CSS file, there is a breakpoint set for smaller screens with a maximum width of 600px. All CSS classes can be redefined and styled within this query. In the provided code snippet, I have opted to change the background color of the body element.

// Handling Navigation Bar Underline
$("a").click(function(){
    $("a.active-menu").removeClass("active-menu");
    $(this).addClass("active-menu");
 });
@font-face {
  font-family: 'playfair_displayregular';
  src: url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
       url('Fonts/Playfair Display/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'futuralight';
  src: url('Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}


.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
  }

  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 3px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }

 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:3px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .leftimage{
    width:70%;
    position:absolute;left:0%;
    object-fit: cover;
    width: 69vw;
    height: 100vh;
    height: 400px;
    min-width:560px;
  }
  .bio{
    background-color: rgb(84,104,217);
    position:absolute;right:0%;
    text-align: center;
    width:26%;
    height: 550px;
    top: 47px;
    color: white;
    font-family: 'playfair_displayregular';
    min-width:240px;
    
  }
  .rndface{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 155px;
    margin-top:40px;
    margin-bottom:10px;
  }
.topname{
  padding-top:18px;
  padding-bottom:0px;
  margin-bottom:0px;
  border-bottom:0px;
  white-space: nowrap;
}
.school{
  padding-bottom:12px;
  padding-top:34px;
  font-size:17px;
  font-family: 'futuralight';
}
.interests{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.location{
  padding-bottom:38px;
  font-family: 'futuralight';
  font-size:17px;
}
.mail{
  padding-bottom:12px;
  font-family: 'futuralight';
  font-size:17px;
}
.num{
  padding-bottom:24px;
  font-family: 'futuralight';
  font-size:17px;
}

.fa {
  padding-left:10px;
  padding-right:10px;
  padding-top:12px;
  padding-bottom:12px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
  opacity: 0.7;
}
.fa-instagram {
  color: white;
}
.fa-linkedin {
  color: white;
}
.section1{
  position: relative;
  text-align: center;
  color:white;
}
.HelloIm {
  position: absolute;
  top: 160px;
  left: 4%;
  font-size: 40px;
}
.romf {
  position: absolute;
  top: 200px;
  left: 4%;
  font-size: 65px;
}
.aboutfront{
  background-color: lightblue;
  position:relative; 
  top:600px;
  height: 300px;
}
.abt{
  position:relative; 
  top:48px;
  left: 6%;
  font-size: 28px;
  font-style: italic;
}
.myback{
  position:relative; 
  top:60px;
  left: 6%;
  font-size: 18px;
}
.abtme{
  position: absolute; 
  top:140px;
  left: 6%;
  right:6%;
  font-size: 18px;
  word-wrap: break-word;
}
.footer{
  position:relative;
  background-color:black;
  height:30px;
  top:300px;
}
@media only screen and (max-width: 600px) {
  body {
    background-color: #FFA07A;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <script src="jquery-3.5.1.min.js"></script>
  <script src='script.js'></script>
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1036px)" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    dkin
  </title>
</head>

<body>
  <header class="topnav" id="topnav">
    <a class="active-menu" href="index.html">Home</a>
    <a class="link" href="#news">DontUse</a>
    <a class="link" href="#contact">DontUse</a>
    <a class="link" href="about.html">About</a>
  </header>
  <div class='section1'>
    <img class= 'leftimage' src="https://www.topuniversities.com/sites/default/files/styles/lead_article_image/public/blogs/lead-images/engineering_imagery.jpg" alt="ADDALT">
    <div class='HelloIm'>Hello, I'm</div>>
    <div class='romf'>Rsdfadkin.</div>>
  </div>
  <div class='bio'>
      <img class = 'rndface' src="rndface.png" alt="Missing File">
      <p class='topname'>
        <h1>Rdkin.</h1>
      </p>
      <p class='school'>
        Negh School
      </p>
      <p class='interests'>
        EnginScience
      </p>
      <p class='location'>
        Chicaois
      </p>
      <p class='mail'>
        framail.com
      </p>
      <p class='num'>
        (845504
      </p>
      <p>
        <a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/rokin-a3a9541a5/" class="fa fa-linkedin"></a>
        <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/rdkin/" class="fa fa-instagram"></a>
      </p>
      <p>
    </div>
    <div class='aboutfront'>
          <h2 class='abt'>
            About
          </h2>
          <p class='myback'>
            MY BACKGROUND
          </p>
          <p class='abtme'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt, aperiam consequuntur 
            beatae molestias eaque repudiandae nulla error veritatis 
            illo? Deleniti necessitatibus magni, maxime asperiores veniam laborum quisquam placeat. Deleniti?
          </p>
    </div>
    <footer class='footer'>
      <p>
        © 2020 By Rodsfadkin.
      </p>
    </footer>
  </body>
</html>

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

Struggling to retrieve data from AJAX call

I'm having trouble accessing the data returned from a GET AJAX call. The call is successfully retrieving the data, but I am unable to store it in a variable and use it. Although I understand that AJAX calls are asynchronous, I have experimented with ...

javascriptjqueryajax

Utilizing Django framework for crafting a captivating homepage

Successfully set up the django framework and developed an app for my homepage. I added the app to the settings in the project folder and was able to get the HTML running smoothly. However, I am experiencing issues with styling as the CSS won't apply. ...

pythonhtmlcssdjango

Ways to deselect checkboxes and eliminate validation requirements

Below is the HTML code snippet that I am working with: <div class="form-group"> <div class="input-group"> <label for="daterange-vacancy" class="input-group-addon">Van</label> ...

javascriptjqueryhtmlcheckboxcalendar

Struggling with making the $.ajax() method function properly in PhoneGap when connecting to a server hosted on the local

Currently, I am attempting to send an ajax post request to an IIS Express hosted MVC 4 Web API endpoint from an Android virtual machine (Bluestacks) on my computer. Here is the code snippet I have been working with: $.ajax({ type: "POST", ...

androidjqueryajaxrestcordova

Tips for horizontally arranging a list with a flexible number of columns

I am attempting to create a horizontal list with 3 columns that automatically moves to a new line when the columns are filled. I have been trying to implement this using PHP but haven't had any success. If anyone could provide some guidance on how to ...

javascriptphphtmlcsstwitter-bootstrap

Execute the function on each visit to the page

Hello and thank you in advance for any help provided. I have a website where I want to redirect US visitors to our US-specific site through a modal popup when they arrive on our Australian site. I only want the script to execute once per visit. How can I ...

jqueryajax

Steps for transferring a checked statement from an HTML document to a JavaScript file

Struggling to transfer checked statements from HTML to JS file {{#each readValues }} <br> Plug: {{@index}} => {{this}} <input type='checkbox' class="plug" onclick="sendData();" /> {{/each}} The code above is written i ...

javascripthtmlnode.jsexpresshandlebars.js

What's the best way to use a single tag with a class to replace multiple nested blockquote tags

I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...

pythonhtmlbeautifulsoupblockquote

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

phphtmlcss

midway through processing HTML form

In the past, I have come across web forms that span multiple pages. If invalid information is entered on any page, it triggers an error message and requires the user to rectify their input. Despite this, I am having trouble locating resources to guide me ...

html

What are the steps for distributing a styled React component?

My goal is to release a UI library using React, but I am struggling with how to handle styles. When I write code in a project, I typically use webpack and babel to build my code, resulting in the creation of a *.css file. import React from 'react&ap ...

cssreactjsnpmwebpackbabeljs

Implementing auto-complete functionality for a text box in an MVC application using jQuery

After incorporating code for auto completion in a text box using AJAX results, the following code was utilized: HTML: <div class="form-group col-xs-15"> <input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" > ...

javascriptjqueryajaxasp.net-mvcautocomplete

In React.js, the switch case statement consistently defaults to the default case

Currently, I am working on utilizing <select> tags to update information across components using useContext(). However, I am encountering an issue where the default case is consistently being returned despite the fact that the logged values match the ...

javascriptswitch-statement

What is the best way to create scrollable content inside a container?

To accommodate more fields within my fixed-position container, I need to increase its height. However, instead of doing this, I believe adding a scroll bar to the container and making its contents scrollable would be a better solution. The challenge now i ...

htmlcssscrollcontainersscrollbar

The React component does not trigger a re-render

Using React Redux, I am able to pass values successfully. However, the component I intend to render only does so once. Interestingly, when I save my code in VSCode, it renders again and the data displays on the page as expected. return ( <div classN ...

javascriptreactjsreact-hooksreact-router-redux

Looking to minify a JavaScript file? Consider changing the overly long variable name "veryLoooooooongVariable" to something shorter,

When working on improving readability, I tend to use very long variable names which can increase the size of my JS files. I'm wondering if there are any tools or libraries available that can automatically change these long names to shorter ones? I am ...

javascript

Using Javascript's Speech Recognition to activate a button

I am new to using JavaScript Speech Recognition and decided to work with the Annyang library. My goal is to automatically trigger the "show date" button when the user says 'hello', without actually clicking the button. However, I've been fac ...

javascripthtmlonclickspeech-recognitionannyang

The Quickest Way to Retrieve Attribute Values in JavaScript

I'm trying to access a specific attribute called "data-price". Any tips on how I can retrieve the value of this attribute using this syntax: Preferred Syntax div[0].id: 48ms // appears to be the quickest method Alternative Syntax - Less Efficient ...

javascriptjqueryperformance

Using the mpdf addPage function generates new empty pages

Hey there, I'm facing an issue where using $mpdf->addPage() within a for loop results in creating blank pages instead of adding content. My goal is to generate a new page when a certain condition is met and then populate it with the required conten ...

phphtmlcssmpdf

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

I am seeking guidance on how to create a single page application using Angular that features a fixed background image (such as a white pattern) in the BODY tag. However, I would like the ability to change the color behind this image depending on the conten ...

cssangular