Designing a dynamic webpage featuring various elements using CSS and HTML

I'm just starting out with HTML and CSS for website design and I want to create a layout similar to the one shown below:

https://i.sstatic.net/u5ill.png

In the image above, you can see that the page includes a header with a logo, and two boxes that overlap slightly. However, when I tried to implement this design, I ran into issues when resizing the screen. The squares didn't adjust properly on different screen sizes.

Here is the code that I've experimented with:

.header {
  position: absolute;
  width: 100%;
  min-height: 18rem;
  left: 0;
  top: 0;
  background: #F1E579;
}

.logo {
  font-size: 350%;
  font-family: Above;
  margin-left: 3rem;
  margin-top: 2.75rem;
}

.box1 {
  position: absolute;
  width: 37rem;
  min-height: 40rem;
  left: 7.8rem;
  top: 12.3rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.box2 {
  position: absolute;
  width: 42rem;
  min-height: 45rem;
  left: 44rem;
  top: 10rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

htmlcss

Answer №1

The issue lies in the measurement units being used. I have updated the units in key areas from rem to vw (viewport width).

1 vw equals 1 % of the viewport's width.

While this adjustment may fulfill the requirement of resizing the boxes (only width, leaving heights unchanged), it may not suit your specific needs. Especially for mobile screens (such as phones in portrait view), a different styling approach would be necessary.

.header {
  position: absolute;
  width: 100%;
  min-height: 18rem;
  left: 0;
  top: 0;
  background: #F1E579;
}

.logo {
  font-size: 350%;
  font-family: Above;
  margin-left: 3rem;
  margin-top: 2.75rem;
}

.box1 {
  position: absolute;
  width: 37vw;
  min-height: 40rem;
  left: 7.8rem;
  top: 12.3rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.box2 {
  position: absolute;
  width: 42vw;
  min-height: 45rem;
  left: 44vw;
  top: 10rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

@media (min-width: 1500px) {
  .box1 {
    width: 38vw;
  }
}
<div class="container">
  <div class="header">
    <div class="logo">LOGO</div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

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

What is the best way to iteratively fade in data from a MySQL database one by one?

How can I load data from a MySQL database and display it one by one with a fade-in effect? Let's say I have a total of 40 images stored in the database. First, I want to display each image like this: <li class="img" style=" list-style: none; flo ...

javascriptphpjquerycss

Align an element to the center and then align a second element to the right using Tailwind CSS

Here is a visual representation of my goal: the dashed line indicates the center of the container. My objective is to horizontally center one div element and then right-align a second div within the same row, all while keeping both elements centered. htt ...

htmlcsstailwind-css

A 2x2 Bootstrap grid that spans the full height of the viewport, where each cell has vertical overflow set to auto

I need help creating a grid with 100% height that has the following layout: The second row should expand to fill the remaining vertical space, even if cells C & D have limited content. Additionally, if the content in cell D is too large, I want a ver ...

cssbootstrap-5

When hovering over an anchor, apply a border or box-shadow effect to the image

I'm trying to make an image display a border or box-shadow when hovering over a link, along with an animated circle around the round image. I've attempted to achieve this with the following CSS code, but it doesn't seem to be working. https ...

htmlcss

Implement pagination once the amount of data surpasses the specified threshold

I'm looking to implement pagination once the displayed data exceeds a certain limit. Currently, I have set it up so that only 6 items are shown at a time. What I want is to add pagination below the table to display the remaining data. How can I achiev ...

htmlangularjspaginationstrongloopapic

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

Stop phonegap from altering the default orientation on the device

As a newcomer to phonegap, I am seeking a reliable and straightforward way to determine whether a device is a tablet or a phone. My current method involves comparing the width and height sizes of the screen - if the width is greater, then it is a tablet; o ...

angularjscsscordovaphonegap-pluginsngcordova

SB Admin 2 menu with multiple levels does not collapse as expected

I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Changing the visibility of a model in a method using the setVisible() method with Wicket Ajax

So in my code, I have: public class MyClass extends WebPage { static AjaxFallbackLink ddd = null; static AjaxFallbackLink dddd = null; (...) } Within the constructor, I have: ddd = new AjaxFallbackLink("previous") { @Override pub ...

javahtmlajaxbuttonwicket

Using PHP and jQuery to output content in HTML

I am facing an issue with displaying HTML content fetched from a database using the following code: $("#menuOverlay").append('<?php include('aggiungiPaginaComp.php');?>'); Although the code is functioning properly, when I view t ...

javascriptphpjqueryhtml

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

Modify individual list item attributes

I have been attempting to modify the background of the list item labeled as home in order to ensure that it displays hover properties even when not being interacted with. Despite specifying this in the class, the appearance does not change. Below is the H ...

htmlcssselector

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

I am currently encountering an issue with sending data to another page without refreshing. I am able to send the data as text, but for some reason, I am unable to send it as a modal. Why might this be happening? Here is an image of my current page https:/ ...

javascriptphphtmlmysqlajax

Show informational pop-up when hovering over selected option

My goal is to create an information box that appears when a user hovers over a select option. For example: <select id = "sel"> <option value="sick leave">Sick leave</option> <option value="urgent leave">Urgent lea ...

javascriptjqueryhtmlajax

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

The center div is not functioning properly

After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...

htmlcss

Modify the style of an element using a media query and Angular 4

Is there a way to update a class of an element based on the browser's width in my .ts file? matchMedia('(max-width: 400px)').addListener((mql => { if (mql.matches) { this.myclass = 'toggled'; } })); In the HTML, it shou ...

htmlangulartypescript

Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...

cssreactjstypescriptemotion

Maximizing AngularJs performance on handheld devices

Recently, I developed an HTML page using material angularjs that functions perfectly on desktops with various browser sizes. However, the issue arises when opening the same page on a mobile device as it behaves like a desktop application instead of adjust ...

htmlangularjsangularjs-materialresponsiveness

Revamp the md-select Container

Hello there! I'm looking for a stylish way to revamp the design of the md-select Window. Specifically, I aim to customize the background and hover effects. Despite my attempts to modify the .md-select-menu-container in CSS, it proved unsuccessful. I ...

cssangularjsangular-material