Responsive columns and fluid Flex row implemented in Bootstrap 4

I am striving to optimize this section for responsiveness. It looks fantastic on larger viewports, but as we start shrinking down, for instance, on a viewport around 930px, I'm facing difficulty in keeping the image perfectly aligned as shown in the initial screenshot.

I have experimented with setting the photo area to background-size: cover, but unfortunately, this solution ends up cropping the edges of the image on smaller viewports, which is not ideal.

The second issue arises when viewing on a mobile screen: these two blocks need to stack vertically. I am confident that I can tackle this issue once the primary problem is resolved.

<section class="card-group">
     <div class="card">
          <img src="..." class="img-fluid">
     </div>
     <div class="card card-vcenter">
          <div class="card-block">.....</div>
     </div>
</section>

.card-vcenter{
     display: flex;
     align-items: center;
     justify-content: center;
}

Thank you in advance for your help!

htmlcsstwitter-bootstrapflexboxtwitter-bootstrap-4

Answer №1

Utilizing appropriate bootstrap responsive classes is crucial. It's possible that the issue lies within the CSS styles for the .card and .card-group classes.

Here is the suggested code:

 <section class="card-group">
  <div class="container-fluid">
    <div class="row">    
      <div class="col-md-6">
        <img src="..." class="img-fluid">
      </div>
      <div class="cold-md-6">
        <div class="card-block">.....</div>
      </div>
     </div>
    </div>
  </section>

Remember to include a new <div class="row"> and two col-md-6 for each of your cards, then close the container and section.

Your CSS:

section.card-group img {
  padding: 0;
  margin: 0;
}
section.card-group .col-md-6 {
  /*insert background, font, padding, margin styles*/
}
section.card-group .card-block {
  /*insert background, font, padding, margin styles*/
}

By leveraging bootstrap's responsive classes, you can eliminate the need for your "card" classes and avoid concerns about content alignment. It's advisable to refer to the bootstrap documentation for further guidance! :)

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

Tips for presenting the cards in a professional layout

After creating a group of cards in angular using a for loop, I encountered an issue: <div class="row"> <div *ngFor="let dev_data of data" class="col-3"> <div class="card shadow"> <div class="card-body ...

htmlangularbootstrap-4

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...

htmlcssangularsafaricpanel

Adding a unique field to a specifically tailored post type

I'm dealing with a plugin-generated component that showcases articles from a custom post type, each with the class post-id. Unfortunately, I can't modify the plugin's files in the child theme to make changes, so I have to create a custom fun ...

phphtmljquerywordpressadvanced-custom-fields

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

javascripthtmlangulartypescript

Struggling to execute a custom SQL update method in .NET through jQuery, encountering various errors like 404 and 500

I am attempting to invoke a .NET method from a JavaScript file within a Web Form project. I am uncertain if my approach is correct and I am encountering difficulties in debugging the process. .NET method: [System.Web.Services.WebMethod] public st ...

jqueryhtmlsqlajax

Leveraging static elements in a fluid design using solely CSS whenever feasible

Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...

cssresponsive-designfixed

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Reloading the page using ajax technology

What is the best way to handle logging out on a webpage without reloading the page? Thanks in advance!) My perspective: def logout(request): auth.logout(request) html = render(request, 'base.html') return html Using Ajax: $('a[hre ...

javascriptpythonhtmlajaxdjango

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Element sticking on scroll down and sticking on scroll up movements

I am currently working on a sticky sidebar that catches and stays fixed at a certain scroll point using JavaScript. However, I am facing an issue where I need the sidebar to catch when scrolling back up and not go further than its initial starting point. ...

javascriptjqueryhtmlcss

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

javascriptphpjqueryhtmlajax

Troubleshooting Problem with Web Forms and Bootstrap Form Design

Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page. The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Mai ...

cssasp.netformswebforms

Looking to include a delete button for removing the currently selected tab in a Bootstrap tabs component

Currently, I am in the process of developing a travel website and have encountered an issue with implementing Bootstrap tabs in the admin section. I have managed to tackle some aspects, such as dynamically creating tab options. The problem arises when t ...

jqueryhtmltwitter-bootstrapbootstrap-4

Obtain and retrieve media URL (m3u8) with the help of PHP

I am currently working on a project that involves hosting videos for a client on a website. The videos are loaded externally through m3u8 links on the site. Now, the client has expressed interest in having these videos available on a Roku channel as well. ...

phphtmldomcurlroku

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

javascriptjqueryhtmlcss

Dynamic div with height controlled by the content of the background image

I'm trying to figure out how to make a div with a background image of 100% width always maintain the aspect ratio of the image for its height. Is there a way to achieve this? In simpler terms, when I resize the page, I want the div to scale down whil ...

htmlcss

Hierarchy in CSS: The battle between author and user styling

Following a hierarchy of precedence: User agent declarations User normal declarations Author normal declarations Author important declarations User important declarations The CSS specification distinguishes between author and user: Author. The author s ...

css