Flexbox margins (exceeding 100% total width)

Currently collaborating with @c4rlosls and we are facing 2 issues: https://i.sstatic.net/44WcI.jpg If the parent container with class container-fluid has a px-0, it extends beyond 100% width. Additionally, the elements with classes .cont2 a and .cont3 a do not have 100% width of their parent div.

How can these two issues be resolved?

.inew1{
background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}
.inew2{
background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}
.inew3{
background-image: url(../img/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    height: 100%; 
}
 <div class="container-fluid px-0 "> 
      <div class="row no-gutters">
          <div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">
          

          
          <a href="google.uno" class="w-100">
              <h1 class="">Title</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
          </div>
          


        <div class="container-fluid col-xl-4 col-lg-12 ">
          <div class="row">
            <div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">
            <div class="row">
          <a href="google.uno" class="w-100">
              <h1 class="">Title2</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
            </div>
            </div>
            <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">
            <div class="row">
          <a href="google.uno">
              <h1 class="">Title3</h1>
              <span>Lorem ipsum dolor sit amet</span>
            </a>
            </div>
            </div>
          </div>
        </div>
      </div>
</div>

htmlcssflexboxbootstrap-4

Answer №1

If you want to resolve the issue, make the following changes in your code:

<div class="container-fluid px-0 "> 
  <div class="row no-gutters">
      <div class=" col-xl-8 col-lg-12 inew1 d-flex justify-content-end align-items-start flex-column">

        <a href="google.uno" class="w-100">
          <h1 class="">Title</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>
      </div>

    <div class="container-fluid col-xl-4 col-lg-12 ">
      <div class="row no-gutters">
        <div class=" col-xl-12 inew2 d-flex justify-content-end align-items-start flex-column">

        <a href="google.uno" class="w-100">
          <h1 class="">Title2</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>
        </div>

        <div class="col-xl-12 inew3 d-flex justify-content-end align-items-start flex-column">

        <a href="google.uno" class="w-100">
          <h1 class="">Title3</h1>
          <span>Lorem ipsum dolor sit amet</span>
        </a>

        </div>
      </div>
    </div>
  </div>

In the code above, I have added "no-gutters" in the row after col-xl-4 to solve the scrollbar problem. Additionally, I removed <div class=row> from the 2nd column (inew2, inew3) to address the title background issue.

Answer №2

I have created a custom template for you to use:

body {
  margin:0;
  padding:0;
}

.flex {
  display:flex;
  width:100%;
}
.col1 {
  flex:3;
  height:500px;
}
.col2 {
  flex:2;
  display:flex;
  flex-direction:column;
  height:500px;
}

.bg {
  background:url("https://picsum.photos/800/600");
  width:100%;
  height:100%;
  position:relative;
}

.bg2 {
  background:url("https://picsum.photos/600/800");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.bg3 {
  background:url("https://picsum.photos/500/400");
  width:100%;
  height:100%;
  flex:1;
  position:relative;
}

.text_area {
  box-sizing:border-box;
  height:70px;
  padding:20px;
  background:rgba(0,0,0,.7);
  width:100%;
  display:flex;
  flex-direction:column;
  position:absolute;
  bottom:0;
  left:0;
  justify-content:center;
}

.text_area .title {
  color:#fff;
  font-weight:600;
  font-size:28px;
  font-family:sans-serif;
}

.text_area .description {
  color:#fff;
  font-weight:400;
  font-size:12px;
  font-family:sans-serif;
}

@media screen and (max-width:728px){
  .flex {
    flex-direction:column;
  }
  .col1 {
    height:250px;
  }
}
<div class="flex">
  <div class="col1">
    <div class="bg">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
    </div>
  </div>
    <div class="col2">
    <div class="bg2">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
      </div>
    <div class="bg3">
      <div class="text_area"><div class="title">Title</div>
        <div class="description">Lorem ipsum dolor sit amet</div>
      </div>
      </div>
  </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

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

cssgoogle-fonts

Stop users from refreshing or closing the window while an axios request is being processed

I'm in the process of creating a dynamic Web Application that involves utilizing Axios.get requests. Given that Axios operates asynchronously, my approach includes an async function along with await axios.all: async handleSubmit(){ const ...

javascripthtmlreactjsaxios

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening? If you'd like to take a ...

htmlcss

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

Activate the dropdown menu when ul element is in focus

I am working on creating a dropdown navigation using pure CSS. I want the dropdown menu to appear when clicking on the ul. The issue I am facing is that simple ul:focus > ul does not seem to work, even though there is an anchor within it. However, the : ...

htmlcss

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

Directive customization through comprehension expressions

Python is where I spend a lot of my time, so I'm really drawn to the comprehension_expression syntax within Angular's ngOptions. However, I would love to see this syntax extend to other inputs, such as with an ng-list. For instance, let's s ...

javascripthtmlangularjsangularjs-directive

Utilize Bootstrap 4 to seamlessly switch between nav-pills for larger screens and navbar-nav for smaller screens

On larger screens, I prefer the appearance of the nav pills. However, once the collapse button appears, I would like the menu to stack and resemble the image provided instead of the pills. Do I require custom CSS to achieve this? <div id="menu" class=" ...

csstwitter-bootstrapbootstrap-4navnav-pills

Troubleshooting a problem with dynamic options in Materialize select set

I'm currently facing an issue with my two dependent dropdowns, country and state. When I select a country, I use JavaScript to populate the respective states in the state dropdown. However, even though the options are added correctly when I inspect th ...

javascripthtmlmaterialize

Select2 input field not receiving focus when navigating by tab key

When attempting to tab through the fields, I encounter an issue where the fields do not highlight as expected. Despite trying various solutions, such as the following CSS code: .select2-selection__rendered:focus { outline: none !important; box-shadow: ...

cssbootstrap-4accessibilityjquery-select2

Eliminate the Material Stepper heading

Is there a way to remove the header navigation from the material stepper? I've tried using the following CSS code without success: .mat-horizontal-stepper-header-container{display: none} You can view the stepper on Stackblitz by clicking this link: ...

cssangularangular-materialangular-material2

Using Javascript to generate a button that randomly chooses links within the webpage

Looking for help with JavaScript to select a link when a button is clicked on the page? Check out my code and let me know what I'm doing wrong. For the full code, visit: here HTML <!doctype html> <html lang="it" xmlns="http:/ ...

javascripthtmlcssfunctionif-statement

Printing JSON data with multiple rows in HTML

How can I display multiple rows returned by JSON using my JavaScript function? function getScheduleDate() { //alert("enters1"); //var usrname= getParameterByName('uname'); var postVal=$.post('http://localhost/ipack/salesvisit.ph ...

phphtmljson

Bug in ZURB Foundation Topbar causes incorrect highlighting of links on mobile when clicked

While utilizing the ZURB Foundation Topbar, I have encountered a bug that I find frustrating. When navigating the 2nd level drop downs and clicking on a link (li elements), the active highlight flickers to one of the elements above before taking you to the ...

csshtmlzurb-foundation

Creating a central navigation menu for a website

Currently, I am working on incorporating a menu in the center of a webpage (please note that this is not a top navigation menu). Here is the initial setup: https://i.sstatic.net/3arql.png Users are able to click on various menu items to access different ...

javascripthtmljquerycss

CSS smoothly scrolls upward within a set height restriction

Is there a way to use CSS to ensure that the scroll bar of a fixed-height message box is always at the bottom, displaying the latest entry? Currently, as more messages populate the chat box main section, everything inside remains static. The only way to v ...

css

Resolved the z-index problem with the header and sidebar placement

Hello there! I have come across an issue that I need some help with. I have a fixed sidebar and header on my website, both of which have drop shadows applied to them. However, I don't want the header to cast a shadow on the sidebar as I want them to ...

htmlcssz-indexfixed

Selenium: Discrepancies between browser display and HTML code are evident

When attempting to log in to this page using Selenium and Python, I encountered a discrepancy between the page displayed in the browser and the one described in the HTML code. Both Firefox and Chrome webdrivers yielded the same result. chromedriver = "./c ...

pythonhtmlgoogle-chromeselenium

Assistance is required for establishing a connection between php and js. The process begins with executing a sql query to extract the necessary data, which is then encoded into JSON format

I have encountered an issue with a project I am working on solo, involving a sidecart in a PHP file with external links to SQL, CSS, and JS. The problem arose when attempting to insert necessary data into JS using JSON encoding. <?php session_start(); ...

javascriptphpcssmysqljson

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

javascriptjquerycssasp.net-mvc-4bootstrap-4