CSS - Inconsistencies in size rendering across Chrome and Safari

I'm a Computer Science freshman and I created a website a few weeks ago. Initially, I checked it only on Safari and everything looked fine. However, when I tried it on Google Chrome, the layout appeared completely different. How can I resolve this issue with my webpage? Specifically, I'm using 'vh' for the '.showcase-container', but in Chrome, it seems too small.

Safari View:

Google Chrome View:

CSS

/*ShowCase*/

body{
    background :#e6e6e6;
    overflow-x: hidden;
}

#showcase{
    position: relative;
    color:white;
    padding: 2rem;
    background: #333;
}

#showcase::before{
    content:"";
    position: absolute;
    background: url("../images/about/header-1.png") no-repeat center center/cover;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    opacity: 0.4;
}

#showcase .showcase-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    height:25vh;
}

#showcase .showcase-content{
    z-index:100;
}

.presentation .presentation-container{
    padding:5rem;
    margin:2rem;
    align-items: center;
    text-align: center;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    ...

</script>
</html>
css

Answer №1

To ensure flexibility in the showcase container, it's recommended not to use height but instead opt for using paddings on the div. This approach allows the container to grow as needed.

#showcase .showcase-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

Alternatively, if you require a specific height for the showcase, you can set a min-height property.

#showcase .showcase-container{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    min-height:25vh;
    padding-top: 20px;
    padding-bottom: 20px; 
}

Using height may restrict expansion when child elements need more space.

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

Putting an <input/> element inside a Material UI's <TextField/> component in ReactJS - a beginner's guide

I am attempting to style <TextField/> (http://www.material-ui.com/#/components/text-field) to resemble an <input/>. Here is what I have tried: <TextField hintText='Enter username' > <input className="form-control ...

javascripthtmlcssreactjsmaterial-ui

Mastering VueTify: Customizing CSS like a Pro

Is there a way to modify the CSS of a child vuetify component? .filterOPV > div > div { min-height: 30px !important; } .filterOPV > div > div > div { background: #f5f5f5 !important; } <v-flex md2 class="filterOPV&quo ...

cssvue.jsvuejs3vuetify.js

The Proper Way to Include External CSS in a Next.js Page Without Triggering Any Warnings

I find myself in a scenario where I must dynamically inject CSS into a webpage. The content of this page is constantly changing, and I am provided with raw HTML and a link to a CSS file from a server that needs to be displayed on the page. My attempt to ...

javascriptcssreactjsnext.jsserver-side-rendering

The carousal control icon in Bootstrap 4 is experiencing a configuration issue

I'm experiencing an issue with aligning the carousel controls in my Bootstrap4 slider. Below is the code I have written: .col-md-4 { display: inline-block; margin-left: -10px; } .col-md-4 img { width: 100%; height: auto; } body .carousel ...

cssbootstrap-4carousel

Using JQuery to adjust the image width to 100% when the height is greater than the width

Currently, I am working on developing a custom WordPress theme and here is the code snippet that I have been using: <div class="post-thumb"> <?php echo get_the_post_thumbnail(); ?> </div> I am facing an issue where I need to adjust the ...

javascriptjqueryhtmlcsswordpress

Issue with Bootstrap columns being misaligned on mobile devices

On my website, I've implemented a Bootstrap Grid design with three columns under the container-fluid BS attribute, along with .row .no-gutters. While the boxes are perfectly aligned in the desktop view, they stack vertically on mobile and tablet devi ...

htmlcssbootstrap-4

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

javascripthtmlcssreactjssvg

Incorporating specialized pseudo CSS styling to a class

Having a bit of a tricky situation here, I am dealing with the following class: <li><a href="test.html" class="hvr-overline-from-left">Test</a></li> Here is the corresponding CSS: .hvr-overline-from-left { display: inline-block ...

jqueryhtmlcss

Add color to the cells within the table

I need help with dynamically adding colors to my table based on the results. If the result is 'UnSuccessfull', the color should be 'red'. If the result is 'Successful', the color should be 'green'. The challenge I a ...

pythonhtmlcssjson

The CSS rule for @media screen is failing to function properly on mobile devices

Is there a way to hide a specific section of my home page only on smartphones? I've tried using the code below but it's still showing up on my phone. Any advice? @media screen and (max-width: 640px) { #statistics .row { visi ...

htmlcss

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

Creating a responsive design for embedding YouTube videos in web pages

I am facing an issue with embedding YouTube videos on my webpage. I have tried to make the videos responsive by using the code provided below, which works well on mobile and tablets. However, on desktops and laptops, the videos appear very large. As a work ...

htmlcsstwitter-bootstrapiframebootstrap-5

Issue: The property 'top' cannot be read as it is null

I'm trying to access the top of my footer, but I keep encountering this error message: Cannot read property 'top' of null Here is the HTML code: <footer class="footer" role="complementary" id="myfooter"> </footer> And in jQuer ...

javascriptjqueryhtmlcss

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

htmlcssiframe

Using Flexbox for dynamic-height items with column wrapping

Struggling to create a dynamic layout that adapts differently for mobile and desktop devices? The goal is to have items sorted based on screen size, with the layout changing accordingly. Check out the main objective below, with a mobile layout on the left ...

csstwitter-bootstrapbootstrap-4flexbox

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

javascriptjqueryhtmlcss

CSS: Achieving Layered Effect with Child Image Over Parent Background Image

I have set a background image on the .section class in my CSS stylesheet. The background also has an opacity effect applied to it. However, I am facing an issue where the child img (which is a transparent png) is displaying behind the background image of t ...

htmlcss

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

Adjust the starting color of a mat-input in Angular 9

I am encountering an issue with the styling of a standard matInput field within a mat-form-field, all contained within a [formGroup] div. The dark background of the parent element is causing visibility problems with the default dark text color of the input ...

cssangularcolorsmat-input

Is it possible to align the second "navbar" div inline with the first "navbar" div?

I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working. * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; } #navb ...

htmlcss