Dynamic adjustment of div size to fit the screen when resizing, based on the svg proportions

Is it possible to use CSS and HTML to automatically adjust the colored divs around the black SVG to fill in any extra width or height of the pink space when the screen size is resized? There is a pink div behind the logo that serves as an example of the space that needs to be filled by the 4 colored divs. I'm wondering if this can be achieved without JavaScript. Any insights on this would be appreciated. Thank you.

<style>
ul {
  margin:0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 77%;
}

li {
  display: block;
  font-size:17px;
  text-decoration:none;
}

.navtext{
  background-color:orange;
  width: 35%;
  height:20%;
  right:0px;
  position:absolute;
  display: flex;
  align-items: center;
}

body {
  margin: 0;
}

.header{
background-color:yellow;
width:100%;
height:20%;
}

.logo{
  position:absolute;
  left:5%;
  background-color:lightblue;
  height:20%;
  display: flex;
  align-items: center;
}

.logotext{
  font-size:27px;
  font-weight:bold;
}

.front {
  background-color:blue;
  height: 81vh;
  position: relative;
  z-index: 2;
  width:100%;
}

.video {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  width:100%;
  top: 0;
}

.container {
  height:200vh;
}

.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}

.logoanimecont{
  text-align:center;
  width:75%;
  margin:auto;
  
}

.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}

.titlebox {
  text-align:center;
  width:75%;
  background-color:purple;
  margin:auto;
  
}

.title {
  font-size:30px;
  text-align:center;
  
}

.hide{ display:none }

.rightbordertop{
  width:100%;
  height:25%;
  background-color:red;
}

.rightborderbottom{
  width:100%;
  height:25%;
  bottom:0px;
  position:absolute;
  background-color:darkgrey;
}

.rightborderleft{
  width:25%;
  height:75%;
  background-color:brown;
}

.rightborderright{
  right:0px;
  height:75%;
  width:25%;
  background-color:blue;
  position:absolute;
}

svg {  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 50%;
    height: 50%;}
    </style>



<div class="container">
  <div class="front">
  <div class="header">
      <div class="logo">
        <span class="logotext">f-e</span>
      </div>
   <div class="nav">
        <div class="navtext">
          <ul>
           <li><a href="#home">About</a></li>
           <li><a href="#news">Services</a></li>
           <li><a href="#contact">Clients</a></li>
           <li><a href="#about">Contact</a></li>
          </ul>
        </div>
      </div>
  </div>
    <div class="left">
      <div class="titlebox">
        <span class="title">Random text, centered v and h.</span>
      </div>
    <div class="right">
        <div class="rightbordertop"></div>
        <div class="rightborderright"></div>
        <div class="rightborderleft"></div>
        <div class="rightborderbottom"></div>
        <div class="logoanimacont">
      <div class="logoanime">
          <svg viewBox="0 0 70 70">
            <path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c-etc.-etc.-

javascripthtmlcsssvg

Answer №1

When it comes to styling blue and red containers without knowing their content, the possibilities are endless. One tip to consider is reducing the use of position: absolute by mastering flex layout techniques. You can refer to this comprehensive guide on flexbox for more insights: A complete guide to flexbox. To achieve a clean layout, you may want to group the central three sections (maroon, pink, and blue containers) into one container styled with inline CSS:

body {
  margin: 0;
}

.right {
  right: 0px;
  width: 50%;
  height: 91%;
  position: absolute;
  background-color: pink;
  justify-content: center;
  align-items: center;
}

.hide { display: none }

.rightbordertop {
  width: 100%;
  height: 25%;
  background-color: red;
}

.rightborderbottom{
  width: 100%;
  height: 25%;
  bottom: 0px;
  position: absolute;
  background-color: darkgrey;
}

.rightborderleft{
  height: 100%;
  flex-grow: 1;
  background-color: brown;
}

.rightborderright{
  height: 100%;
  flex-grow: 1;
  background-color: blue;
}

svg {
  height: 100%;
}
<div class="right">
    <div class="rightbordertop"></div>
    <div style="height: 50%; display: flex;">
      <div class="rightborderleft"></div>
      <svg viewBox="0 0 70 70">
        <path id="metabolism" d= "... full SVG path data here ..." >
       </svg>
      <div class="rightborderright"></div>
    </div>
    <div class="rightborderbottom"></div>
    <div class="logoanimacont"></div>
</div>

Answer №2

To keep things simple, I concentrated on the right side of your page, specifically where the svg is enclosed by four div elements. I also made sure to use new class names for clarity in the code.

I implemented the effect step by step using flexbox. You can take the new .container div and position it wherever you like on your page (just watch out for potential conflicts with existing class names in your project).

NOTE: Make sure to run the code snippet in full-screen mode to see the effect in action.

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: pink;
  display: flex;
  flex-direction: column;
}

.top {
  background: red;
  flex: 1;
}

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  background-color: dimgray;
  flex: 1;
}

.left {
  height: 100%;
  background: brown;
  flex: 1;
}

.center {
  width: 40%;
  height: auto;
}

.right {
  height: 100%;
  background: blue;
  flex: 1;
}

svg {
  display: flex;
  align-items: center;
}
<div class="container">
  <div class="top"></div>
  <div class="middle">
    <div class="left"></div>
    <div class="center">
      <svg viewBox="0 0 70 70">
        <rect width="100" height="100" /></svg>
    </div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</div>

Answer №3

I wanted to include this fresh example to illustrate how my previous solution can effectively achieve the desired outcome. All that is required is to tailor it to the specific requirements of the project (which are currently unknown).

* {
  margin: 0;
  padding: 0;
}

.header {
  background: yellow;
  width: 100%;
  height: 15vh;
}

.nav {
  background: orange;
  width: 35%;
  height: 15%;
  position: absolute;
  right: 0;
}

.content {
  display: flex;
  align-items: center;
  font-family: sans-serif;
  background: purple;
}

.left-column {
  position: absolute;
  left: 0;
  width: 50%;
  height: 70%;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-column {
  position: absolute;
  right: 0;
  width: 50%;
  height: 70%;
  background: pink;
  display: flex;
  flex-direction: column;
}

.top {
  background: red;
  flex: 1;
}

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  background-color: dimgray;
  flex: 1;
}

.left {
  height: 100%;
  background: brown;
  flex: 1;
}

.center {
  width: 30%;
  /* size of the svg */
  height: auto;
}

.right {
  height: 100%;
  background: blue;
  flex: 1;
}

svg {
  display: flex;
  align-items: center;
}
<body>
  <div class="header">
    <div class="nav"></div>
  </div>
  <div class="left-column">
    <div class="content">Center and Middle Content</div>
  </div>
  <div class="right-column">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="center">
        <svg viewBox="0 0 70 70">
          <rect width="100" height="100" />
        </svg>
      </div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </div>
</body>

Answer №4

After implementing flexbox in my code, I was able to achieve the desired layout that I was aiming for. If anyone encounters a similar issue, feel free to refer to my solution which solved the problem after re-writing the code.

html, body{
  margin:0;
  height:100%;
  width:100%;
}

#container{
  background-color:pink;
  height:91%;
  width:100%;
  display:flex;
}

#left{
  width:50%;
  background-color:lightblue;
  display:flex;
  position:relative;
}

#right{
  width:50%;
  background-color:lightgreen;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#right>* {
        flex: 1 1;
}

#logo {
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  background-color:purple;
  left:0;
}
#logo:before {
  content:"";
  display:flex;
  padding-top: 100%;
}

#rightsidetop{
  background-color:orange;
}

#rightsidebottom{
  background-color:pink;
}
<div id="container">
  <div id="left"></div>
  <div id="right">
    <div id="rightsidetop"></div>
    <div id="logo"></div>
    <div id="rightsidebottom"></div>
  </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

Automatic Slideshow

I am trying to implement autoplay in my slider, but I am having trouble figuring out how to do it. The slider itself is working fine, but I know that I need to use an interval for the autoplay feature. If anyone could provide some assistance on how to ac ...

javascriptreactjsslidersetinterval

Error: Property 'barcodeScanner' is not readable

Currently, I am utilizing barcodescanner.js for scanning QR codes. I have successfully downloaded and linked the CaptureActivity android library to my project. However, when attempting to execute the following code: window.plugins.barcodeScanner.scan(sca ...

javascriptandroidjquery-mobilecordova

Creating Duplicates of a Component in React

I am looking for a way to render multiple instances of the same component. Let's take a look at the component that needs to be duplicated (this is just a placeholder example, not the actual component): import React from 'react'; function Du ...

javascriptreactjs

Encountered error: "Node.js and socket.io: Address already in use"

Experimenting with chat using Node.js and socket.io Currently, I am running Ubuntu 12.04 as a user and have a folder "pp" on my desktop. In this folder, I have placed a server file named server.js. Below is the client code: $(document).ready(function() ...

javascripthtmlnode.jssocket.io

How can the Flickr API be utilized with JavaScript functions?

In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...

javascriptjqueryhtmlcssflickr

Would you be able to clarify why the run() function is giving me an error when I try to return {1,3}, but it works fine when I return {a,b} in

I'm really confused as to why the return {1,3} in the run() function is throwing an error when it works just fine for return {a,b} in the fun() function function fun(){ let a = 10; let b = 20; return {a, b}; } ...

javascriptnode.jsecmascript-6

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

Is there a way to update the image on a button after it has been clicked? I want it to switch to a different image when activated. var offButton = new sap.ui.commons.Button({ id : "offIcon", icon : "img/off.png" , press :functio ...

javascriptjqueryhtmlcanvassapui5

Retrieve parameters from functions and convert them into coherent statements

As I delved into the world of THREE.js, I experimented with various geometries. However, manually writing out each geometry became tedious due to the vast array of options available. For example, creating a simple cube required these lines of code: var m ...

javascriptthree.js

Ways to utilize jQuery for intricate forms in place of RJS

Within the 74th episode of Railscasts, Ryan demonstrates the process of executing intricate forms with RJS. Check it out here: The key here is to generate a partial and incorporate it using RJS. This episode is quite dated and back then, jQuery may not ha ...

javascriptjqueryruby-on-railsrjsrailscasts

CSS // code that works on any device or platform

I have since the beginning been annoyed with the compatibility of CSS. Whats the best practice for coding css, that works with the most common platforms... ( IE7+, Firefox, Safari, Chrome AND iPad / iPhone, Blacberry, Android) Are there any list to be fo ...

csscross-browsercross-platformplatform

The log indicates that there are two distinct IP addresses associated with the user

I find that this question may be better suited for another Stack Exchange board, and I am open to migrating it there if needed. In the development of a web application, we record certain event information to assist in diagnosing any potential issues. One ...

javascriptphpajaxipip-address

What is the reason that em takes precedence over p for font-family?

Take a look at this CSS snippet: * { font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif} p { font-family: Courier; } Now let's consider this HTML markup: <p>Hi there. So <em>very</em> pleased to make your acquaintance. ...

htmlcssfont-family

Differences in JSON parsing behavior between Chrome and Firefox

I encountered an unusual issue with the return error of JSON.parse() function: I am using this function to validate a JSON string obtained from a web-based editor. The string is pre-manipulated using the JSON.stringify() function. To be more specific: JSO ...

javascriptreactjsjsongoogle-chromefirefox

Transforming the response.render method in Express to be a promise-enabled

I have a task at hand where I need to develop a render method that constructs HTML blocks into a string. Initially, it appears to be working fine, but I ended up using the infamous "new Promise" and now I'm not sure if my approach is correct. Here&apo ...

javascriptnode.jsexpressasync-awaitnode-promisify

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

htmlcssasp.netvb.netasp.net-webcontrol

Best practices for avoiding string concatenation in Oracle-db with Node.js

Is there a way to prevent SQL injection caused by string concatenation in the SQL query? The searchParameter and searchString parameters, which come from a GET request, are optional. They should be added to the WHERE clause to filter results based on user ...

javascriptnode.jsreactjsnode-oracledb

Cryptocurrency price tracker with sleek Bitcoin symbol and FontAwesome icons

My assignment involved creating a function that retrieves Bitcoin trades from a JSON URL, allows users to change the interval with buttons, uses fontawesome arrows to indicate rate changes (up/down/no change), and displays the data on a website. Everythin ...

javascriptfont-awesomebitcointicker

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

javascripttypescriptvisual-studio-codeerror-handling

Error: The value for 'prepareStyles' property is undefined and cannot be read

Can anyone provide some guidance on this code snippet? I am struggling to understand the error message I am receiving. import React, {PropTypes} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableB ...

javascriptreactjsmaterial-uienzyme

Troubles encountered when loading pages into a div using ajax navigation

As someone new to the world of programming, I am embarking on the journey of creating a simple website for myself. Currently, my website consists of a header, navigation links, an image below the nav (to be updated later), and 3 content divs beneath that. ...

phpajaxhtmlnavigationexternal