Is there a way to modify the HTML layout for responsiveness?

Is there a way to adjust the layout of an HTML structure for both desktop and responsive mode?

https://i.sstatic.net/skAP5.jpg

<div class="header grid py-3">
    <div class="logo_and_title grid">
         <div class="logo grid">
            <a id="logoid" href="/" class=" me-3"><img src="logo.png" width="100%" class="img-fluid" ></a>
            <h1 id="nameid">Title of website</h1>
         </div>
    </div>
    <div class="menu">
        <!-- list of menu items-->
    </div>
<div>

This is the CSS code for desktop:

.grid{
    display: grid;
}
.logo_and_title.grid{
    grid-template-columns: 3fr 7fr;
    grid-gap:1rem;
}
.logo.grid{
    grid-template-columns: 2fr 7fr;
}

#nameid,#logoid,.menu{
    align-self: center;
}
header{
    width:100%;
}
htmlcssflexboxresponsive-designgrid

Answer №1

Give this a shot:

.header {
  background: #002147;
  color: #fff;
  padding: 8px 20px;
  font-family: arial;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
}

.logo img {
  max-width: 60px;
  height: 60px;
  border: 2px solid #fff; 
}

.nameid {
  margin: 0 0 0 15px;
  font-size: 20px;
}

.menu .nameid {
  display: none; 
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
}

@media (max-width: 860px) {
  .header {
    display: flex;
    justify-content: flex-start;
  }
  
  .menu {
    margin-left: 15px;
  }

  .nameid {
    display: none;
  }

  .menu .nameid {
    display: block; 
    margin: 0 0 5px 0;
  }
}
  <div class="header">
    <div class="logo_and_title">
      <div class="logo">
        <a id="logoid" href="/">
          <img src="https://www.example.com/logo.jpg" width="100%" class="img-fluid" >
        </a>
        <h1 class="nameid">Website Name</h1>
      </div>
    </div>
    <div class="menu">
      <h1 class="nameid">Website Name</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
      </ul>
    </div>
  <div>

Answer №2

Utilizing percentages instead of pixels is incredibly beneficial in the process of constructing a responsive web page

      .element_selector{ 
         width: 100%
      }

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

The CSS content spills beyond the edge of the screen

I am facing an issue with aligning my content in the center as it is currently shifting to the right side and going off the screen. Below is the code snippet I am working with: <?php /* Template Name: About Us */ $aboutheading = get_field('abou ...

htmlcsswordpress

HTML text-indent is a way to add extra space to

I cannot understand why my text is not indenting properly. At the very bottom left corner, the "Educational Specifications" text is enclosed within a p element as follows: <p style="text-indent: 3em">Educational Specifications</p> Why doesn& ...

htmlcss

injecting the value of this.value into an HTML input markup using JavaScript's insertCell function

Having a bit of trouble with a JavaScript function that creates a table and inserts a cell using insertCell(0); In this cell, there's an HTML form input that triggers another function onKeyUp, where I pass in 4 parameters. However, the last parameter ...

javascriptjqueryhtml

What is the best way to run a script following the completion of an external asynchronous script within the header tag?

Utilizing Webflow's custom code editor, I incorporated an external script from Finsweet within the <head> tag as per their instructions. Although I would like to modify the page with my own script following the execution of Finsweet's scri ...

javascripthtmlwebflowasynchronous-javascriptexternal-script

How can I set the end date value in JQuery datepicker to be empty

Solution: <html> <head> <script type="text/javascript"> $(function(){ $("#datepicker1").datepicker({ dateFormat: 'dd-mm-yy', onSelect: function(selected){ $("#datepicker2").datepicker("option" ...

phpjqueryhtml

Is the security of "the fate of browser gaming" a concern?

It is predicted that HTML5 will be widely used for game design, but the question remains: how can security be ensured in online HTML5 games? Consider a scenario where players earn badges in a platform game by completing difficult levels. Upon winning a ba ...

javascriptsecurityhtml

Steps for inserting an item into a div container

I've been attempting to create a website that randomly selects elements from input fields. Since I don't have a set number of inputs, I wanted to include a button that could generate inputs automatically. However, I am encountering an issue where ...

javascripthtml

``It seems like the Tailwind background image is not appearing on

The issue lies in the background image not displaying despite trying different methods such as using ""bg-[url('/image/example.jpeg')"" tailwind.config.js theme: { extend: { colors: { darkBlue: "#0 ...

javascriptcssreactjsnext.jstailwind-css

Utilizing a loop for setting variable values in JavaScript

Using both JavaScript and JQuery. Let's imagine there is an array called ListArray with various sentences inside. Sounds easy enough. Is there a way to achieve this? var List = for (var i = 0; i < 10; i++) { //iterate over an array here to c ...

javascriptjqueryhtmlarrayslist

How can I obtain live subprocess output updates?

I am attempting to execute the "tail - f" command on the server to receive real-time output displayed on this HTML page. However, I have not been successful in achieving this and only simple output commands are being displayed instantly. How can I utilize ...

pythonhtmllinuxflask

Disable the default hover effect of the ASP.NET menu

How can I disable the default hover effect on my asp.net menu and instead display child items when the parent item is clicked? I am currently using the pre-built asp.net menu feature and populating menu items from a sitemap data source. <div class="sp ...

jqueryasp.netcss

Implementing Google Apps Script code on my webpages

I am currently in the process of developing a web application using HTML, CSS, and JavaScript with Google Spreadsheet serving as my database. To turn this web app into a fully functional application, I am considering utilizing PhoneGap. After successfully ...

javascripthtmlgoogle-apps-scriptgoogle-api

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

javascripthtmlcssnavigationresponsive

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

javascriptphpjquerycsscheckbox

Trigger a JavaScript function when a key is pressed down

Hey everyone, I'm trying to figure out how to trigger a JavaScript function when a particular key is pressed. For example, I want the function down() to be executed when the down key is pressed and function left() when the left key is pressed. Is ther ...

javascripthtmlfunctionkeyboard

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

I am in the process of creating a user-friendly "My Account" page using react, where users can easily update their account information. I have divided my components into two sections: the navbar and the form itself. However, I am facing an issue with the s ...

javascriptcssreactjsformsvalidation

What is the best way to ensure that the navigation is properly displayed with Bootstrap 4?

While updating a website and incorporating Bootstrap 4 beta, I encountered an issue with the navigation display. Despite making some adjustments, it remains in a vertical format - images are attached for reference. https://i.sstatic.net/BKhWb.png Below i ...

htmlcssnavigationbootstrap-4

Switching colors on SVG when hovering

When I hover over the code below, I want both eyes and eyebrows to change color. I've managed to get it working for the left eye, but not the right eye. Additionally, the fill on the right eyebrow looks strange when hovered over. I suspect this issue ...

csssvghover

PHP: Sending multiple values under a single name

Here's the code I'm currently working with. It includes a form with 6 inputs. The last 3 inputs are named firstanswer, secondanswer, and thirdanswer. <form action="addsurvey.php" method="post"> <input type="text" name="surveyname"> ...

phphtmlarraysinput

Incorporating a Custom Design with the HAP

I have a string that contains a stylesheet, and I am attempting to incorporate it into a parsed HtmlDocument with the help of the Html Agility Pack. Unfortunately, I am unable to modify the InnerText of a style node since it does not have a setter. What ...

c#.nethtmlcsshtml-agility-pack