Unable to create a responsive design for this box

I've been attempting to place text and a button inside a box, but I'm encountering issues with fitting them on medium and small screens. So far, the methods I've tried have not been successful.

Below is the code I am currently using:

* {
  background: #0E2A38;
}

.box {
  color: white;
  height: 230px;
  background: green;
}

.explore {
    font-size: 15px;
    text-align: center;
    padding: 35px 25px;
    height: 230px;
    color: white;
    background: #3161a3;
}

#exploreButton {
    width: 85%;
    color: #3161a3;
    background: white;
    border-radius: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row d-flex">
  <div class="col-9">
    <div class="box">
    </div>
  </div>

  <div class="col-3">
    <div class="explore">
      <p id="exploreTitle">At vero eos et accusamus et iusto</p>
      <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
      <button type="button" class="btn" id="exploreButton">Explore</button>
    </div>
  </div>
</div>

htmlcssresponsive-designbootstrap-4

Answer №1

Simply include the following code:

<div class="row d-flex">
  <div class="col-12 col-md-9">
    <div class="box">
    </div>
  </div>

  <div class="col-12 col-md-3">
    <div class="explore">

This code will ensure that the divs are responsive.
They will take up the full width on screens smaller than 768px (md breakpoint).
You have the option to change md to sm if needed.
Learn more about bootstrap breakpoints here.

Answer №2

Utilizing the css min-width attribute is beneficial when all containers and elements are in a static position. Take a look at my proposed solution.

body {
  background: #0E2A38;
}

.box {
  color: white;
  height: 230px;
  background: green;
}

.explore {
    font-size: 15px;
    text-align: center;
    padding: 35px 25px;
    height: 230px;
    color: white;
    background: #3161a3;
    min-width:300px;
}

#exploreButton {
    width: 85%;
    color: #3161a3;
    background: white;
    border-radius: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row d-flex">
  <div class="col-9">
    <div class="box">
    </div>
  </div>

  <div class="col-3">
    <div class="explore">
      <p id="exploreTitle">At vero eos et accusamus et iusto</p>
      <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
      <button type="button" class="btn" id="exploreButton">Explore</button>
    </div>
  </div>

Another approach is using the overflow:hidden property to conceal content or overflow:auto to enable scrollbars.

Answer №3

* {
  background: #0E2A38;
  margin: 0;
  padding: 0;
}

.box {
  color: white;
  height: 230px;
  background: green;
}

p {
    word-break: break-word;
}

.explore {
    font-size: 15px;
    text-align: center;
    padding: 35px 25px;
    color: white;
    background: #3161a3;
}

#exploreButton {
    width: 85%;
    color: #3161a3;
    background: white;
    border-radius: 2px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-9 col-12">
      <div class="box">
      </div>
    </div>

    <div class="col-12 col-md-3">
      <div class="explore">
        <p id="exploreTitle">At vero eos et accusamus et iusto</p>
        <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
          Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
        <button type="button" class="btn" id="exploreButton">Explore</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Before using .row, make sure to use .container and avoid setting heights. To vertically align both divs, I've used .align-items-center. For more information, refer to the link: https://getbootstrap.com/docs/4.0/utilities/flex/

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

Steps to create a function in a .js file that uses ng-show conditions

I am in the process of validating a web page where the user inputs must be alphanumeric, have a maximum length of 45 characters, and be unique. Below is the code snippet I am working with. Is there a way to consolidate these three ng-show conditions into ...

javascripthtmlangularjs

Exploring numerous choices within a multi-select "category" search bar (web scraping)

Looking to scrape data from this French website using Python and the bs4 library: the content is in french :) . Specifically interested in extracting all possible values of a multi-select search bar named 'TYPE DE BIENS'. This type of search bar ...

javascripthtmlselenium-webdriverweb-scraping

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

Ensuring that nested objects in an absolutely positioned element do not wrap, clear, or stack

Looking for some assistance with my tooltip menu. The problem I'm facing is that my links keep wrapping to a new line, and I can't figure out how to prevent this. I've already attempted using display:inline and float:left on the links within ...

csscss-position

Creating golden phone numbers from a numerical series using JQuery

My latest work assignment involves generating gold numbers from a number series such as 52xxxxxx. Gold numbers could be examples like 52999999, 52727272, or something similar. I'm feeling a bit overwhelmed and unsure of where to begin with this task. ...

jqueryhtmlrandom

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss

Traversing through JSON objects in Angular 2

I am currently facing an issue while trying to iterate through a JSON object. Below is the sample JSON data: floors.ts this.floors= [ { floorName: "floor 1", result: [ { resFloor: "1", ...

htmljsonangulartypescript

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

javascripthtmljquerynode.jsajax

Apply an image as the background for the body using Bootstrap 5 styling

I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...

htmlcssdjangobootstrap-5

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended. Below is the code snippet: HTML <div class="col-md-2 image ...

javascripthtmljquerycss

The dropdown menu is currently activated, but not the individual items within it

Is there a way to make the dropdown menu active when I click on an item, specifically making the word Services active? How can this be achieved? <nav class="navbar navbar-light navbar-expand-xl"> <a class="navbar-brand" hre ...

htmlbootstrap-4dropdown

The debate between utilizing CDN or installing a library through NPM

My journey with NPM has just begun, and I am struggling to grasp how the files within node_modules get integrated into my index.html. Scenario 1: CDN Take jQuery, for instance. When using a CDN, it's as simple as adding the CDN link to a <script& ...

javascripthtmljquerynpm

What could be causing the alignment issue with this html photo gallery?

Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...

htmlcssweb

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

htmlnestedformattingtags

Regular expression that removes attributes from all HTML tags except <a>

$text = preg_replace("/<([a-z][a-z0-9]*)[^>]*?(\/?)>/i",'<$1$2>', $text); Greetings. I came across a preg_replace function that identifies all HTML tags and removes their attributes. However, I need to make an exception for t ...

phphtmlregexhtml-parsing

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this? <table> <tr style="background-color: red;"> ...

javascriptjqueryhtmlcss

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

I am currently working on implementing a rating feature using Angular. This component will be used to rate different languages based on how proficient I am with them. My issue lies in the fact that when I click on one array element, it automatically selec ...

javascripthtmlcssangulartypescript

Tips for effectively highlighting search text within HTML content without causing any issues

I am in search of a solution that can assist me in searching for specific terms within an HTML string while also highlighting them. I have the ability to remove the HTML content from the string, but this poses the problem of losing the context of the origi ...

javascripthtmltypescript

Is it possible to examine elements within Outlook?

Creating HTML emails can be quite the challenge, especially when trying to make them compatible with Outlook. Is there a method to inspect elements in Outlook similar to how we do on a browser's console? ...

htmlemailhtml-emailemail-client

Showing how an iframe can adjust its height to 100% within a div element

Currently, I have a player status script implemented on our Minecraft Server. This script displays the server name, IP address, and the heads of the players currently online. The setup includes two div boxes for the status box: one outer box to fix its pos ...

phpcsshtmliframeheight