Section is obstructing the view of Other Section above

I am struggling to create a responsive design for these two sections, both of which display quite similarly in line. Here are the resolutions for desktop and tablet/mobile:

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

https://i.sstatic.net/3KLyY.png

I suspect the issue lies with my use of d-flex, but I haven't been able to resolve it yet. I used d-flex to align the icons and text in the eight cards horizontally and vertically centered. Should I remove d-flex? If so, what other method can I use to center-align the items inside the card (with the image on the left side of the text)? Below is the source code snippet:

cssresponsivebootstrap-5displayflexboxgrid

Answer №1

It is not recommended to have a fixed height on your img-wrapper element in a fluid layout unless you allow scrolling by setting overflow. Removing the fixed height can make the layout more flexible and responsive.

.third .img-wrapper {
  /* height: 300px; */
  background-image: url("https://svgshare.com/i/gky.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.third i {
  color: #259332;
}

.third .card-body {
  color: rgb(27, 27, 27);
}

.fourth .card {
  border-radius: 15px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2ddc2df">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Third Section - Other Inquiries -->
<section class="third" id="third">
  <div class="container">
    <div class="row text-center mb-3">
      <div class="col">
        <h4><b>Pilih Topik Inquiry</b></h4>
      </div>
    </div>
  </div>
  <div class="img-wrapper">
    <div class="container">

      <div class="row justify-content-center text-center">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
          <div class="card shadow-sm h-100">
            <a href="">
              <div class="card-body d-flex justify-content-evenly">
                <i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
                <span class="card-text flex-wrap">Validasi Perusahaan</span>
              </div>
            </a>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
          <div class="card shadow-sm h-100">
            <a href="">
              <div class="card-body d-flex justify-content-evenly">
                <i class="fa-solid fa-building-circle-check pe-2 flex-wrap my-auto"></i>
                <span class="card-text flex-wrap">Informasi Pasar & Regulasi Standar</span>
              </div>
            </a>
          </div>
        </div>
        ...
      </div>
    </div>
  </div>
</section>
<!-- End of Third Section -->

<!-- Fourth Section - FAQ -->
<section class="fourth">
  ...

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

What are the steps to design a curved gauge with a linear-gradient background?

Looking to create a fully responsive gauge using only CSS, ranging from 0-100% with a gradient color transition from green to red. After encountering issues with existing examples, I conducted tests and ultimately developed a solution that somewhat meets t ...

htmlcssborderlinear-gradients

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

Container with Two Columns Extending to Full Height of Body

I'm currently referencing this example for reference: . In this layout, the left column has a fixed width in pixels while the right column is resizable. My goal is to set the height of the container to 100% of the body height. For instance, focusing ...

htmlcsscss-float

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

cssnpmbase64node-modulesminify

Unable to center text within a CSS div rotated 90 degrees due to width limitations caused by rotation; solution involves utilizing flexbox

Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the cont ...

htmlcss

Animating elements on a webpage can be achieved by using both

Is there a way to create an animation that moves objects based on button clicks? For example, when the "Monday" button is pressed, the object with the correct color will move down. If any other button like "Tuesday" is clicked, the previous object will mov ...

javascriptcss

Fluidly Floating and Steadfastly Sized Element

Creating a 4-column Panel Bar Layout with Specific Conditions: #c1, #c2 = fixed width #c3 autofill with remaining width #c4 auto width (adjusts based on content) corresponding to #c3 Requirements: Float #c4 to the right instead of absolute positionin ...

htmlcsscss-floatfixed-widthvariable-width

Is the CSS :not selector failing to operate as expected?

I have been trying to use the :not selector in my code, but for some reason it's not working. I can't figure out why this is happening, especially since the ul element does have the webmedia-gallery class. Any thoughts on what could be causing th ...

css

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

csshtml

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

A horizontal line that seamlessly lines up with the text and icon on the Bootstrap navbar

How do I create a horizontal line centered with text and the navbar? I'm currently working on my portfolio and I want to have an icon navbar aligned to the left, and on the right side of it, I would like to have the text < / Front-end Web Develope ...

bootstrap-5

Move your cursor over an image within a div container

After not finding any helpful answers on this topic, I've decided to ask for help again. My issue involves having an image inside a div. <div id ="gratterlendis"> <a href ="?page_id=8"><img src="img/gratterlendis.png" align="right" wid ...

jqueryhtmlcss

Applying CSS classes to my div element

Check out the following code snippet: <div class="page-template-default logged-in"></div> I am trying to apply a class like this: .page-template-default .logged-in { } However, it doesn't seem to work. Any idea why? ...

css

Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which ...

csssassprestashop

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired

How come my menu is not showing up in the same format as the code?

I'm struggling to make the menu align with the text logo. Every time I try, the menu ends up below the logo instead of beside it. Can anyone provide some assistance? nav{ width: 1330px; margin: 0px auto; } nav ul li{ text-transform: up ...

htmlcss

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

htmlcssreactjsresponsive-design

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

javascriptcssreactjs