items flexing to fill the width on larger displays

After completing my first web page using flexbox, I encountered an issue with the layout when viewed on a larger screen resolution (1894x787). The content appears stretched and distorted. Here are the screenshots for comparison:

At 1326x768

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

At higher screen resolution

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

Codepen

Some elements were set with flex: 1 1 60% (where the % varies), but changing to flex-grow: 0 did not resolve the issue.

Fixed parameters were only applied to the containers of images (fixed heights) without setting fixed widths for any container.

Are there any specific rules or best practices for using flex boxes that I may have overlooked?

Would implementing media queries be the most effective solution, or is there a more robust approach to developing with flexbox?

How can I ensure that the page displays correctly on all screen sizes, without distortion or excessive compression?

<!--CSS code snippet-->

<!--HTML code snippet-->

htmlcssflexbox

Answer №1

Your issue stems from the following:

.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

When specifying width: 100% and height: 360px for an image, it's important to consider the consequences.

The width will adapt based on the container size, while the height remains fixed at 360px. This lack of flexibility causes distortion in the image's aspect ratio.

To address this issue, you can explore various solutions such as:

  • Responsive css background images
  • How to make CSS background-image responsive?

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

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

cssreact-nativeflexbox

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form. I have successfully implemented an effect where clicking on the input field causes the label to change its posit ...

javascripthtmlcssmaterial-design

What are the steps to limit the usage of angular.module('myApp', ['ngGrid', 'ui.bootstrap', 'kendo.directives'])?

I have two JavaScript files with AngularJS code. The first file, myjs1.js, includes the module: angular.module('myApp', [ 'ngGrid', 'ui.bootstrap', 'kendo.directives' ]); The second file, myjs2.js, also includes th ...

javascripthtmlangularjs

The issue in AngularJS 1.4 where the select element value is not binding due to a type mismatch

My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...

javascripthtmlangularjs

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

htmlangulartypescript

Arranging an image next to a text input in Bootstrap 5: A step-by-step guide

I want to align a magnifying glass image next to a text input on the left side. However, it is currently displaying above the text input. How can I make sure they are positioned side-by-side using Bootstrap 5? <link rel="stylesheet" href="https://c ...

htmlcsstwitter-bootstrapbootstrap-5

Utilize Google Maps to receive directions to a specific destination and discover current traffic conditions along the route using their comprehensive API

I am currently working on implementing the Google Maps direction identifier functionality with traffic details. However, I am able to obtain directions but not specific traffic details for a selected path; it seems to apply overall traffic data instead. ...

javascriptjqueryhtmlgoogle-maps

When I try to open my modal in Electron by clicking on the button, it doesn't work

I was expecting the modal to open by clicking on the Edit button within #app, but it doesn't open at all! I am unsure if there is an issue with my JavaScript logic or my HTML code! When attempting to use a function for the Modal, it still does not wo ...

htmlvue.jselectron

What strategies can be implemented to avoid using .stop() in specific scenarios?

Currently, I am working on a jQuery animation where clicking on a tile should display its information by hiding all other tiles and showing its details. While I have implemented .stop() to prevent queuing issues, I encountered a problem with the transition ...

javascriptjqueryhtmlcssanimation

Tips for adjusting the height of the NextJS Image tag based on the width of the screen

I'm leveraging next/image to display my image in the following way: <Image src={imageLink} width="1920" height="512" alt="Hero Image" /> Everything works well for screen widths larger than 750px. Is there ...

cssreactjsnext.jsmedia-queriesnext-images

Fade in a CSS class using jQuery

I'm attempting to incorporate a basic fadeIn() CSS effect on specific objects that are tagged with the "button" class. My goal is to have the "hoverbutton" class fade in when the object is hovered over, and then fade out when the cursor moves away fro ...

jquerycssjquery-uifadein

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml

Steps for ensuring a div component appears on top of any other component (like h1 or p)

The outcome of the code below is displayed in this image: https://i.stack.imgur.com/CPDqC.png Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making ...

javascripthtmlcssreactjs

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

javascriptphpjqueryhtml

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

cssasp.net-coreblazor.net-7.0asp.net-core-css-isolation

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

Error: The function `bootstrap_field` was provided with both positional arguments and keyword arguments

After attempting to update my Django sign_in template with Bootstrap fields and arguments, I encountered an issue. Exception: Error found in C:\Users\hp\Desktop\fastparcel\core\templates\sign_in.html, at line 25 'b ...

pythonhtmldjangobootstrap-4backend