What is the best way to eliminate the gap between these two div elements?

There's a gap between two divs in my HTML that I can't seem to remove. Here are the relevant CSS styles:

#tab-2-content {
  display: grid;
  grid-template-rows: 1fr 2fr;
  width: 70%;
  margin: 0 auto;
  grid-gap: 0;
}

... (CSS code continues)


<div id="tab-2-content" class="tab-content-item">
  <div class="tab-2-content-top">
    <h2>Watch TV shows and movies anytime, anywhere — personalized for you.</h2>

    <div class="push">
      <a href="#" class="btn">Watch free for 30 days</a>
    </div>
  </div>

  ... (HTML code continues)

</div>

I'm facing an issue where there is an unwanted space between the "tab-2-content-top" and "tab-2-content-bottom" divs, creating a gap that doesn't look right. I've tried adjusting the styles but can't seem to fix it. Any help on how I can make these divs stack on top of each other seamlessly would be greatly appreciated. Thank you.

htmlcsscss-grid

Answer №1

If you're dealing with smaller screens, consider resetting as well:

#tab-2-content{
  grid-template-rows:auto;
  }


#tab-2-content {
  display: grid;
  grid-template-rows: 1fr 2fr;
  width: 70%;
  margin: 0 auto;
  grid-gap: 0;
}

.tab-2-content-bottom img {
  width: 250px;
  margin-bottom: 1rem;
}

.tab-2-content-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}

.tab-2-content-top .push {
  justify-self: right;
}
...
...
...
}

@media screen and (max-width:800px) {/* reset to your own value */
  #tab-2-content {
    grid-template-rows: auto;
  }
  .tab-2-content-bottom {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    align-items: start;
  }
  .tab-2-content-top {
    grid-template-columns: 1fr;
    / grid-auto-rows: auto;
    grid-gap: 0;
  }
  #tab-2-content div h2 {
    margin: 0;
    text-align: center;
  }
  .tab-2-content-top .push {
    justify-self: center;
    align-self: start;
  }
}
<div id="tab-2-content" class="tab-content-item">
  <div class="tab-2-content-top">
    <h2>Watch TV shows and movies anytime, anywhere — personalized for you.</h2>

    <div class="push">
      <a href="#" class="btn">Watch free for 30 days</a>
    </div>
  </div>
  <div class="tab-2-content-bottom">
    <figure>
     ...
     ...
    </figure>
  </div>
</div>

Answer №2

Correction: The problem arises due to conflicting height settings in the grid configuration and specific CSS for div..tab-2-content-top. You are assigning 1fr of height to the top-content div in the grid, but then restricting it to 300px with max-height: 300px

By removing the max-height property, the layout will function as intended.

Answer №3

#tab-2-content {
  display: grid;
  grid-template-rows: 1fr 2fr;
  width: 70%;
  margin: 0 auto;
  grid-gap: 0;
}

.tab-2-content-bottom img {
  width: 250px;
  margin-bottom: 1rem;
}

.tab-2-content-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}

.tab-2-content-top .push {
  justify-self: right;
}

.tab-2-content-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

#tab-2-content .btn {
  background: var(--primary-color);
  padding: 1rem 1.8rem;
  border-radius: 0.1rem;
  text-transform: uppercase;
}

.tab-2-content-top div {
  padding-bottom: 2rem;
}

#tab-2-content div h2 {
  margin-bottom: 1.5rem;
  font-weight: normal;
  margin-right: 1rem;
  margin-left: 1rem;
  max-width: 500px;
}

.tab-2-content-bottom figcaption {
  width: 200px;
  margin: auto;
}


/* the problem happens when browser width < 700px I have the following change in my media queries */

@media screen and (max-width:700px) {
  .tab-2-content-bottom {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    align-items: start;
    border: 2px solid red;
  }
  .tab-2-content-top {
    grid-template-columns: 1fr;
    grid-gap: 0;
    /*max-height: 300px;*/
    border: 2px solid red;
  }
  #tab-2-content div h2 {
    margin: 0;
    text-align: center;
  }
  .tab-2-content-top .push {
    justify-self: center;
    align-self: start;
  }
}
<div id="tab-2-content" class="tab-content-item">
  <div class="tab-2-content-top">
    <h2>Enjoy unlimited TV shows and movies on the go — tailored just for you.</h2>

    <div class="push">
      <a href="#" class="btn">Start your free trial now</a>
    </div>
  </div>
  <div class="tab-2-content-bottom">
    <figure>
      <img src="img/tab-content-2-1.png" alt="#" />
      <figcaption>
        <h4>Watch on any device</h4>
        <p>From Smart TVs to gaming consoles and more - watch everywhere.</p>
      </figcaption>
    </figure>

    <figure>
      <img src="img/tab-content-2-2.png" alt="#" />
      <figcaption>
        <h4>Instant streaming or download for later</h4>
        <p>Access on your phone or tablet, wherever your day takes you.</p>
      </figcaption>
    </figure>

    <figure>
      <img src="img/tab-content-2-3.png" alt="#" />
      <figcaption>
        <h4>Compatible with all devices</h4>
        <p>Stream directly from Netflix.com on any computer.</p>
      </figcaption>
    </figure>
  </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

Setting the height of a div to 100% is not effective

I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of ...

htmlcss

Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown. Photo without console opened Pho ...

htmlcssgoogle-mapstwitter-bootstrap

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Does anyone know of a CSS selector that can be used when JavaScript is disabled? I'm not referring to the noscript tag, but specifically in CSS. ...

csscss-selectors

Unforeseen outcomes arise when toggling expansion in JavaScript

I have a pop-out div at the top of my page that expands and closes on toggle. Also, when I toggle the pop-out div, it changes the top position of another div (a side pop-out menu). The issue is that the side pop-out menu should only appear when clicking ...

javascripthtmlcss

Every time an input field is clicked, an email is sent

I'm struggling with the contact form on my website. Instead of sending an email after clicking on each input field, I want it to send only one email after hitting the submit button. Currently, it sends a total of 5 emails - 1 with user inputs and 4 wi ...

phpjqueryhtmlajax

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

htmlcss

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

javascriptpythonhtmlajaxdjango

The click function operates only once

Here are two simple JavaScript functions: CTCC.Transactions.PieceRecuClick = function (source) { $(".chk input[type='checkbox']").attr('checked', true); } CTCC.Transactions.PieceNonRecuClick = function (source) { $(".chk input ...

javascriptjqueryhtmlasp.net

In the readmore.js script, position the "readmore" link within a div instead of outside of it

I have added annotations that vary in length, so I am looking to integrate the readmore.js plugin. To ensure uniform sizing for all annotations (even empty ones), I need to set a minimum height for the div container. <annotation> <div style="wi ...

javascriptjqueryhtmlcss

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...

htmlcssbackgroundtransparent

Why are link elements that generate hyperlinks important?

I am confused about the purpose of using link tags to create hyperlinks. Is there a reason to include code like <link rel="author" href="about.html">, <link rel="next" href="next.html">, or <link rel="help" href="help.html">? Since this ...

htmlhyperlink

The text that follows the cursor seems to stand out taller than the rest

When I type words in a textarea input field, the cursor seems to be taller than it should be (as shown below). What is causing this issue and is there a way to make it as tall as the words with a font size of 38px? Here is the code snippet: <textarea n ...

htmlcss

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

What Causes mat-bottom-sheet-container to Overflow Instead of Remaining Anchored at the Bottom of the Mobile Screen?

I am encountering an issue with a popup window in my Angular app. Despite testing it on various screen resolutions using Chrome's DevTools Screencast, the popup appears correctly styled and positioned on mobile devices. However, when tested on a real ...

androidcssangularangular-material

What are some solutions for repairing the issue of horizontal collapse?

I am currently using Bootstrap 5 to create my website template, and I have encountered a problem: After clicking the "Menu" button, not all of the sidebar elements fade out as expected (I'm attempting to use the horizontal collapsing plugin where the ...

htmlbootstrap-5

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

javascriptphphtml

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

htmlcssplayframework

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

My webpage features a "Reports" page that will dynamically display buttons (formatted ASP:Hyperlinks) based on the number of active reports in a table. While everything works well, I am struggling with achieving the desired layout. I want my buttons to app ...

htmlcssasp.net

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

I am encountering a similar issue as described in this thread: same problem (fiddle: original fiddle). However, I am still learning JavaScript and struggling to apply the solution provided because my HTML code is slightly different. Can someone please assi ...

javascriptjqueryhtmlcss

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app