Issue with image display in Chrome caused by Flexbox styling

I recently set up a flexbox for my website, but I'm encountering an issue in Chrome. When the viewport is smaller than the width of two images, the entire site zooms out and everything gets distorted. However, this problem doesn't occur in Firefox. I've tried multiple solutions but none seem to work. If you want to take a look at the website itself, here's the link: airstarkennels.com

body {
  background: #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
}
#first-page-header {
  color: #ff00ee;
  text-align: center;
}
#parents-page-content-wrapper {
  margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.parents-page-image-wrapper {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
}
.parents-page-images {
  max-height: 350px;
  opacity: 1;
  cursor: pointer;
  transition: 0.4s;
}
.parents-page-images:hover {
  opacity: 0.8;
}
<main>
  <div id="parents-page-content-wrapper">
    <h1 id="first-page-header">Parents</h1>
    <div id="parents-page-mommy-info-wrapper">
      <div class="parents-page-image-wrapper">
        <img id="parents-page-mommys-pedigree" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
        <img id="parents-page-mommy-image" class="parents-page-images" src="https://www.airstarkennels.com/images/mommy.jpg">
      </div>
    </div>
  </div>
</main>

htmlcssgoogle-chromeflexbox

Answer №1

One reason for this issue is the content overflow causing scrolling on Chrome in the X axis. To address this, consider using CSS Grid for your images container.
Create a grid container with display: inline-grid, and since the image widths may vary, specify grid-template-columns: auto auto for the columns.
Putting it all together:


body {
    background: #000000
        url('https://www.airstarkennels.com/images/main-background.jpg') left
        bottom/cover no-repeat fixed;
}

#first-page-header {
    color: #ff00ee;
    text-align: center;
}

#parents-page-content-wrapper {
    margin: 0 0 2em;
}
#parents-page-mommy-info-wrapper {
    display: flex;
    justify-content: center;
}
.parents-page-image-wrapper {
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-items: space-between;
}

.parents-page-images {
    max-width: 100%;
    max-height: 350px;
    opacity: 1;
    cursor: pointer;
    transition: 0.4s;
}

.parents-page-images:hover {
    opacity: 0.8;
}
<main>
    <div id="parents-page-content-wrapper">
        <h1 id="first-page-header">Parents</h1>
        <div id="parents-page-mommy-info-wrapper">
            <div class="parents-page-image-wrapper">
                <img id="parents-page-mommys-pedigree" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">
                <img id="parents-page-mommy-image" class="parents-page-images"
                    src="https://www.airstarkennels.com/images/mommy.jpg">
            </div>
        </div>
    </div>
</main>

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

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

htmlcss

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

Default values for CSS variables: only apply if the variable has not been previously defined

My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...

csscss-variables

Enhancing jQuery Mobile listview with voting buttons on each item row

I am looking to incorporate 2 vote buttons within a jQuery mobile listview, positioned on the left-hand side and centered within each list item. While I have managed to achieve this using javascript, my goal is to accomplish it without any additional scrip ...

javascriptjqueryhtmlcssjquery-mobile

Unable to accept the link ID in the modal

Presently, I am facing an issue with a modal that links a product with a customer and involves product discount calculations. The customer is automatically selected using the modal id, and the product is chosen through select options with a while loop. T ...

javascriptphphtmlmysql

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Generating dynamic div elements in a Laravel blade template using a foreach loop

After receiving an object from the controller to the blade using compact, I am utilizing it in my blade file to display the data. <div class="col-lg-4 col-md-4 col-xs-12 col-sm-6"> <!-- This must regenerate to print next 4 entries--> ...

phphtmllaravel

Reposition and resize an image. Creating a grid layout

I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section): The entire project is based on a grid layout. I need a circular image that is larger than the container, positioned to the ...

htmlcssimagegridcss-position

Avoid overflow of a flex element within the <body> tag by ensuring its child with overflowing content takes up 100% of its width

I am facing an issue with my dashboard setup that includes a sidebar. I want the content area to have horizontal overflow scroll, but instead of that, it overflows its parent element. I experimented with flex and grid-template-columns values (1fr 5fr) with ...

css

What is the best way to eliminate concealed divs from the view source of a webpage?

On my HTML page, I have some hidden DIVs that can still be viewed in the page source. I want to ensure that these DIVs are not visible to users when they inspect the page source. Is there a way to achieve this using Javascript or another solution? ...

javascriptphphtml

jQuery does not trigger background image change in Webkit

const displayPreviewImage = (imageUrl) => { $('#slideshow-container').css("background-image", `url('files/images/store/content/templates/websites/preview_images/${imageUrl}'`); } I have a function here th ...

jquerycssajaximagebackground

Filtering Completed: Table Returned

Recently, I worked on a fun project where I organized JSON wine data into a table and created an object that defines various wines along with their attributes like color, taste, and body. The main objective: When clicking the red button, I want a function ...

javascripthtmlreactjsjsx

What is the best way to deactivate unclicked href links within a loop?

https://i.sstatic.net/sUufY.png Looking at the template image, my goal is to disable all links that were not clicked when one of the links from 'number1' to 'number3' is clicked. For example, if 'number2' is clicked, then &ap ...

javascripthtml

Troubleshooting MaterialUI: Is there a way to prevent the InputLabel text from disappearing when setting a background color on the Select component?

My goal is to change the background color on dropdown elements while keeping the default text visible. Currently, if I don't explicitly set a background color on the Select component, the text specified in the InputLabel displays correctly. However, o ...

cssreactjsmaterial-uiinline-stylescss-in-js

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect. I am utilizing composite views to define a general layout fo ...

cssjsffacelets

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

Utilizing hover effects and timeouts to conditionally show React components

I encountered a challenging React layout dilemma. It's not a complex issue, but rather difficult to articulate, so I made an effort to be as clear as possible. The data I have maps individual components in the following way: map => <TableRow na ...

javascriptcssreactjsmouseeventsettimeout

Generating a list of items to buy using a JSON document

So here's the json file I'm working with: [ {"task":"buy bread","who":"Sarah","dueDate":"2023-10-18","done":false}, {"task":"clean car","who":"David","dueDate":"2023-08-30","done":true}, {"task":"write report","who":"Jenny","dueDate":"2023-09 ...

javascriptjqueryhtmlajaxjson

Transfer information from the client to the server using AJAX and PHP by

When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...

javascripthtmlcanvas

jquery's each method is not functioning as intended and causing unexpected issues

I'm in the midst of developing a website, and one section requires users to input their details into a form. My goal is as follows: When a user clicks the submit button with any empty fields, I want a span element (initially set to display none in CS ...

javascriptjqueryhtml