I created 4 Bootstrap cards, each in a separate column. Within each card, I added another card with some information.
However, when I test the responsiveness by reducing the screen size, the text overflows out of the card. Can anyone help me understand why this is happening and how to fix it?
Thank you!
DEMO
.cardsZone {
margin-top: 2%;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
}
/* Add your CSS code here */
Problem
1) In order to achieve the wrapping style shown below, move your style="overflow-y: auto;" attribute from class="card-body" to class="card mysmallCcards"
https://i.sstatic.net/0yyxx.png
2) If you prefer the wrapping style as depicted below, change
<span class="brandName card-title card-text">Settings in the world</span>span tag to a p tag and make the following adjustments:
.mysmallCcards{
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
overflow-y: auto;
/*overflow-x: hidden;*/
}
.brandName{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;*/
}
Initially - the text extends beyond the card because the width of the card is set to auto and does not accommodate its wider content.
Secondly - It seems unclear what your goal is. However, you can follow this strategy:
style="overflow-y: auto;" from divs with the class card-bodyoverflow: auto; to .myCards in the CSS.myCards > .card-body {
min-width: fit-content;
}
To see the full result, view the snippet in full-screen mode and adjust the screen size.
.cardsZone {
margin-top: 2%;
width: 80%;
height: 100%;
margin-right: auto;
margin-left: auto;
}
.myCards {
background: #E7EAF180 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
height: 100%;
overflow: auto;
}
.myCards > .card-body {
min-width: fit-content;
}
.card-deck .card {
margin-left: 0px;
}
.mysmallCcards {
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.card-header:first-child {
border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}
.mycardHeader {
background-color: white;
padding: 8px;
}
.imgDash {
width: 40px;
height: 40px;
border-radius: 8px;
}
.brandName {
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;
}
.subtitledash {
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;
;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 28px;
}
.imgusersDash {
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
}
.usrDash...
UPDATE section omitted for brevity
....
...
.links...<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="six" style="height: 75%;">
... // HTML structure long code goes here
</div>I am currently working on customizing the theme of my ionic app, specifically trying to assign different colors to the min and max knobs on an ion-range component. At the moment, I am only able to apply a single HTML property called "color" to the selector ...
Recently, I've been developing a website that dynamically loads new content from a MySQL database as the user scrolls. However, I've encountered an issue where the new content is loaded even with minimal scrolling, rather than only when reaching ...
My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...
I can't seem to trigger the click event in CSS This is my code: <input name="btn" type="button" onclick="~/Default22.aspx" value="Home" class="classname" style="position:absolute; left: 286px; top: 160px; margin-bottom: 0px;"/> and I've ...
Looking to develop a Website using node.js and express with Pug as the template language, incorporating Bootstrap CSS. However, encountering an issue where Pug is not importing my custom CSS but is successfully importing Bootstrap CSS. Experimented with d ...
Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it. https://i.sstatic.net/OXhJu.j ...
I am considering implementing the use of the min() and max() functions in my project. I'm curious about the current browser support as of 2018. Do you think it is necessary to include the @supports at-rule? For example, I could write: .px-4-safe { ...
Is there a way to add a loading animation on the visible part of a page with a container that has a vertical scroll? I've tried using a div with class: .loading-animation { height:100vh; background: url(img/loading.gif) 50% 50% / 100px 100px ...
Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...
My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...
Explore the custom netting options for baseball and softball batting cages here. It seems like there might be an issue with displaying tables and background colors in the description field. We'll look into it! ...
Recently, I've been working on customizing a Wordpress Theme called iconic-one for a friend of mine. Overall, the customization process has been going smoothly, but I have encountered a roadblock. I made some changes to the style of the navigation bar ...
Looking for assistance in removing a specific span element from the code snippet below, which was extracted from the elements tab of a browser. I am trying to delete the span located under the fourth 'td' within the 'tr' that has the cl ...
Greetings! I am new to using jQuery and I am looking to access an element that I have clicked on. My goal is to navigate to neighboring elements and retrieve their values. <td>21</td> <td>Peter</td> <td>Admin</td> <t ...
Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...
My HTML textarea allows users to input numeric serial numbers in various formats - either inline, separated by any character, or in columns from an Excel file. The serial codes are either 14 characters long if the first character is "1," or always 15 char ...
I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...
Let's analyze this scenario <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"></div> <div class="col-md-6 col-sm-6 col-xs-6"></div> <div class="col-md-3 col-sm-3 col-xs-3"></div> </div& ...
Can someone provide an example of how to create a div rotating around a circle in CSS3 while the circle itself is already rotating? I attempted to use webkit frame, but it did not work correctly. If anyone has any examples or tips on achieving this effec ...
Seeking assistance with a site issue that has been causing frustration. I have spent the entire evening trying to solve it without success. The issue at hand involves modifying tag appearance after each article on my website. The problem arises when viewi ...