Adjust the width of the mosaic layout to a 50% / 50% ratio

I'm looking to adjust the layout so that each image occupies 50% of the page. Currently, one large image takes up 2/3 of the space and two smaller images take up the remaining 1/3.

You can find the images here:

To make the large image occupy 50%, you can use this CSS code:

.tweak-index-gallery-layout-packed [data-index-gallery-images='3'] 
.Index-gallery-item:nth-child(3n+1) {
width: 50%;}

However, I'm unsure how to adjust the smaller images to fill the remaining space after resizing the large image.

css

Answer №1

I simply put together some basic code that I hope will be useful for you. Thank you

body {
  margin: 0;
}

.Index-gallery-inner {
  background-color: #fff;      
  display: inline-block;
  width: 100%;
}

.Index-gallery-item {
  box-sizing: border-box;
  float: left;
  height: 500px;
  border: 5px solid #fff;
  width: 50%;
}

.Index-gallery-item:nth-child(2),
.Index-gallery-item:nth-child(3){
  height: 250px;
  width: 50%;
}

.Index-gallery-item-inner {
  background-color: #ccc;
  height: 100%;
  width: 100%;
}

.Index-gallery-item-image {
  background-color: white !important;
  padding: 0 !important;
}
<div class="Index-gallery-inner clear">
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></div>
  </div>    
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></div>
  </div>
  <div class="Index-gallery-item">
    <div class="Index-gallery-item-inner"></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

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

Dropdown menu in Bootstrap gets cropped behind a scrollable container

I am encountering a problem with my Bootstrap Drop Down. The dropdown is located within a scrollable div with a fixed height. Whenever I click on the dropdown, the menu appears behind the scroll content. However, a normal select works perfectly fine. htt ...

htmlcsstwitter-bootstrapbootstrap-4

Modifying the WP FlexSlider plugin to eliminate the previous and next side panels

Is there a way to either reduce the width of the slider's prev/next sides or remove these panels while keeping the arrows to cycle through slides? These elements appear to be within ul.flex-direction-nav. I attempted using ul.flex-direction-nav { dis ...

jquerycsswordpresspluginsflexslider

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

javascriptjquerycss

Tips for preventing images from stretching the width and height of my HTML

I am facing an issue with my SVG files positioned as "absolute" on my page. When they are close to the corners of the page, they end up expanding the width of my Container element (using Material UI React). I have tried setting "maxWidth":"100vw" on the ...

cssreactjsimagewidth

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

javascriptcssreactjsnext.jstheme-ui

What is the method for creating a hovering triangle on a particular element?

My navigation bar consists of two parts. On the left side, there is a logo image, and on the right side, there are 4 list elements. I am attempting to make a triangle appear at the bottom of the element when hovered. I have floated the list to the right an ...

htmlcsscss-selectorspseudo-element

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

jquerycss

Unable to connect to a style sheet

I'm in the process of developing a web application and I'm facing an issue with linking a stylesheet to my app. Check out my code below: <html> <head> <title>Bubble</title> </head> <link rel=" ...

css

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

cssreactjsnext.jsbackground-image

The alignment of my Navbar Brand is off in my Navigation Bar and won't align to

<body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs ...

htmlcss

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

The height of the ReactPlayer dynamically adjusts to accommodate content beyond the boundaries of the page

I have a video on my webpage that I want to take up the entire screen, but currently, users have to scroll a bit to reach the bottom, which is not ideal. This is my JavaScript: <div id="page"> <div id="video-container"> ...

javascriptcssreactjsreact-player

using `clear: both` does not stop text from wrapping

Currently, I am facing an issue with positioning 3 divs in my layout. Two of the divs are floating to the left and right respectively, while the third one should be placed under the two others. I tried using clear: both but it doesn't seem to work as ...

htmlcsscss-float

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is the drag-and-drop feature not working properly?

I'm new to coding in Javascript and I'm attempting to insert an image inside a border created with CSS. Unfortunately, the script doesn't seem to be working properly. It's possible that there is a small error in the code causing the iss ...

javascriptjqueryhtmlcss

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...

javascripthtmlcsstwitter-bootstrapweb

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...

phpjquerycsscodeigniterjquery-select2