The col-md-6 grid does not adapt well for mobile responsiveness

I'm facing an issue with the layout of a section on my desktop site - when viewed on mobile, the image overlaps everything else. I need the image to be above and the orange box below on mobile.

Desktop

https://i.sstatic.net/Tu05k.jpg

MOBILE https://i.sstatic.net/YThnZ.png

.second-section .box-orange {
  background-image: url("/img/fundo2.png");
  height: 400px;
  color: white;
  margin-top: 10%;
  margin-bottom: 10%;
}

.second-section .box-orange img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}

.second-section .box-orange h3 {
  font-size: 2.5em;
  margin-bottom: 5%;
}

.second-section .box-orange h3 .line {
  font-size: 2.5em;
  margin-bottom: 5%;
}

.second-section .box-orange p {
  font-size: 2.5em;
  margin-bottom: 5%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section class="second-section">
  <div class="container">
    <div class="row align-items-center box-orange">
      <div class="col-md-6">
        <img class="w-100" src="img/campos.png">
      </div>
      <div class="col-md-6 ml-5 ml-md-0 text-center">
        <h3>lorem lorem! <div class="line"></div>
        </h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.
        </p>
      </div>
    </div>
  </div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

I am unsure whether I need to adjust my CSS structure or use some media queries to achieve the desired mobile layout.

The mobile version needs to look like this.

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

After applying the media query, this was the result.

@media only screen and (max-width: 800px) {
 .second-section img {
  height: unset;
  margin-left:unset;
}

 .textdiv {
  margin-left:0px;

}
}

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

htmlcsstwitter-bootstrapsassbootstrap-4

Answer №1

Here is the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="my.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>     
    </head>
    <body>
        <section class="second-section">
            <div class="container">
                <div class="row align-items-center box-orange">
                    <div class="col-md-6">
                    <img class="w-100" src="img.jpg">
                    </div>
                    <div class="col-md-6 ml-md-0 text-center textdiv">
                    <h3>lorem lorem! <div class="line"></div></h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.</p>
                    </div>
                </div>
            </div>
        </section>  
    </body>    
</html>

And here is the CSS:

In my.css file:

.box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}
.second-section h3 {
  font-size: 2.5em;
  margin-bottom: 5%;
}
.second-section.line {
    width: 80%;
    border: 2px solid #77d3c2;
    position: absolute;
    left: 33%;
    top: 100%;
  }

  .second-section p {
  font-size: 1.4em;
  padding: 0% 10%;
}
.textdiv {
  margin-left: 3rem;
}

@media only screen and (max-width: 800px) {
    .second-section img {
      height: unset;
      margin-left:unset;

    }

    .textdiv {
      margin-left:0px;

    }
}

The issue with fixed image height for mobile devices is resolved in the media query.

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 prevent a React app's scripts from loading on browsers that do not support them?

My current project makes use of create-react-app, where the React script main.js is loaded at the bottom of the <body/> tag. However, it crashes on unsupported browsers upon loading. Above the main.js script block, there is another <script> th ...

javascripthtmlreactjs

Replicate and refresh characteristics

As a newcomer to this platform, I have found stackoverflow to be an invaluable resource over the past year. Currently, I am working on creating a complex form that requires the user to add subgroups. Using jquery (1.5.1 - perhaps it's time for an upd ...

javascriptjqueryhtmlforms

By default, the first table row is displayed when using table grouping in AngularJS

I am attempting to display only the first tr in the table and hide all other tr elements by default. I have tried using ng-show and ng-hide but it does not seem to be working as expected. This is not originally my plunker; I used it for reference on group ...

htmlcssangularjs

Highlighting the active link in a foreach loop

I wrote a script that generates links for all the directories. <?php $dirs = array_filter(glob('../*'), 'is_dir'); ?> <ul style="float:left;"> <?php foreach ($dirs as $nav) { echo "<li><a href='$nav&a ...

phphtmlif-statementforeach

Is there a copyright concern regarding CSS?

There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...

css

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

htmlcssgoogle-chromemicrosoft-edgebootstrap-4

Activate background functionality while modal is active in Bootstrap 4

I have come across similar questions addressing the need to change the following: .modal-backdrop { display: none; } However, my modal does not have this .modal-backdrop. I am unsure if this is a new feature in Bootstrap 4, but the mentioned solution ...

javascriptcssbootstrap-4

Ways to expand the search box in a navigation bar with Bootstrap 5

Recently delving into front-end development, I've been working on designing a webpage that includes a search box (you can view the jsfiddle here). I decided to borrow the navbar component from https://getbootstrap.com/docs/5.0/components/navbar/ and m ...

htmlcsstwitter-bootstrapbootstrap-5

A guide on converting SVG Files to PDF format with JSPDF using JavaScript

I encountered difficulties converting SVG Files into PDF using JSPDF. Here is the code I tried: var doc = new jsPDF(); var test = $.get('amChart.svg', function(svgText){ // console.log(svgText); var svgAsText = new XMLSerialize ...

javascripthtmlsvgpdf-generationjspdf

What is the process for modifying CSS in Laravel?

New to Laravel over here, currently working in Homestead. When I need to make changes to my CSS, I typically edit the app.scss file located in resources/assets/sass and then recompile the css with Mix using the command npm run dev. I'm not entirely ...

phpcsslaravellaravel-blade

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

displaying a separate HTML file with its own distinct CSS styling

Recently, I was tasked with investigating an existing website. Currently, the website utilizes a single root html file that contains multiple iframes linking to external html pages. However, the team behind the website has noticed that this setup is causin ...

phphtml

What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example: Snippet: <div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;"> <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; ...

htmlcss

Issue with Next.js app styles persisting on pages after page refresh

I am currently working on my first next.js project, transitioning from create-react-app, and I've encountered an unusual issue. When I refresh the home page, the CSS styles persist without any problem. However, if I navigate to a different page like " ...

cssreactjsnext.js

When utilizing an API to render text into a div, the offsetHeight function may return 0

I'm working with a div that displays text fetched from an API call. I'm trying to implement a See more button if the text exceeds 3 lines. Here is my approach: seeMore(){ this.setState({ seeMore: !this.state.seeMo ...

javascriptcssreactjs

Rotation using CSS in Internet Explorer 8

Can anyone help me with a CSS solution for rotating elements in IE8? I've tried some solutions that claim to work in IE8, but they're not working for me. What am I doing wrong? Here's what I've attempted: <!DOCTYPE html> <htm ...

htmlcssinternet-explorer-8rotation

Display the contents of a particular table row upon clicking the button located within that row

In my index.php, I have a database containing folder paths. The user selects one or more paths to run and they are then queried in search.php. Each row has its own button that, when clicked, sends the path to be processed through a series of functions (aja ...

phphtmljquery

How can one iterate through elements of a specified length using Jquery?

Currently, I am in the process of designing an animation for my website. The animation involves different divs that each contain an image and a description related to that image within an aside element. The width of the aside is slightly wider than the ima ...

javascriptjqueryhtmlcss

Access dynamic content from Tinymce 4.x without any manual effort

Is there a way to extract the HTML content from a tinyMCE editor and display it on a page without using the tinyMCE editor itself? I know about the getcontent() function in tinyMCE, but is there another function, parameter, or plugin that can be used to ...

cssclasstinymceextract

Display a popover by making an Ajax request

When attempting to display a popover on hover of an image, I encounter an issue where the content of the popover is not being shown. This content is retrieved through an Ajax call to a template, which includes a tag used in a taglib that renders the popove ...

jqueryajaxtwitter-bootstrapgrailspopover