Adjust the background color of a div based on the amount of text it contains

I am currently facing an issue with the testimonials section on my website. The div has a background color that looks great on desktop, but when viewed on mobile devices, the testimonials text extends beyond the height of the background.

Here is the CSS class assigned to the div:

.quote{
    background-color: #f7f7f7 !important;
    border: 8px none;
    height: 350px;
    padding: 15px;
}

I have tried changing the height from 350px to 100% or auto, but unfortunately, that did not solve the problem. I need the background to adjust its height based on the amount of text displayed in the testimonials.

htmlcss

Answer №1

To ensure the div is a height of exactly 350px, make sure you include either overflow-y: hidden; or overflow-y: auto.

Alternatively, consider changing height to min-height if you want the div to expand with the content.

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 optimal resolution for a background image in a Cordova app?

Currently working on a Cordova application that requires different background images for various screens. Despite using media queries to provide the background image in different resolutions, we are facing an issue where the background image is not displ ...

androidioscsscordova

Can anyone provide guidance on how to simulate a click on a JavaScript action for an iPhone?

I am attempting to trigger a click on a "javascript:void(0)" link so that I can retrieve HTML data within the script. Can someone advise me on how to achieve this without using illegal APIs like UITouchEvent, as I only work with NSUrl? Thank you in advan ...

javascriptiphonehtmlnsurl

Entering a string into Angular

Within my function, I trigger the opening of a modal that is populated by a PHP file template. Within this template, there exists a div element containing the value {{msg_text}}. Inside my JavaScript file, I initialize $scope.msg_text so that when the mod ...

javascriptphphtmlangularjs

The "End Session" button in HTML

Seeking guidance in my journey to learn HTML and CSS, I am attempting to create a dialog box that can be closed with the click of an X button. Despite successfully adding the X button to the dialog box's upper bar, I am facing an issue where clicking ...

htmlcssbutton

Mozilla displays the background color even when the visibility is set to hidden

When working with CSS, I've noticed that when I use visibility: hidden on a <td> tag in Mozilla, the background color still shows. To see an example, visit this jsfiddle. It displays fine in Chrome but not in Mozilla. ...

htmlcss

Creating onclick events in .net

My form POST code is as follows: <form action="http://ServerName/fse5/main/FormPost.aspx" id="frmLogin" method="post" target="_blank"> <table cellspacing="0" cellpadding="0" width="100%" border="0> <%= CompleteRequest %> <inp ...

c#asp.nethtmlsharepointweb-parts

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

cssreactjstypescriptmaterial-ui

Struggling to position the newest messages at the bottom of the list

I'm working on creating a web chat system similar to IRC where the latest messages should always be at the bottom of the chat window. Below is my attempt, but unfortunately it's not working as expected: ...

htmlcsschat

Is there a way to align two links side by side, with one on the left and the other on the right?

<a href="example"><p style="text-align:left">Previous Page</a> <a href="example"><p style="text-align:right">Next Page</a> I am trying to figure out how to align these links on the same line. Any suggestions would be a ...

htmltexthref

Arrange image, icon, and title in Bootstrap navigation bar

index.html <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> </ul> <span class="navbar-text" s> <ul class="navbar-nav mr-auto ...

htmlcssbootstrap-4

Using jQuery, encapsulate an image within a div element and transfer the floating style attribute from the image to the div

Can anyone assist me in wrapping an image within a div along with transferring the float setting? This is my current code: $('.photo-img').wrap('<div class="photo-wrap" />'); I would like the new div to inherit the float proper ...

jqueryhtmlcss

Optimizing functions by consolidating them and leveraging shared variables

My index page is quite straightforward - it has buttons that when clicked, randomly change the colors displayed on the background circle divs. The code I've written works well, but it's a bit repetitive; I ended up creating a separate function fo ...

jqueryhtmlcssrefactoringparameter-passing

precise placement of image inside pop-up

Having trouble positioning an image (an arrow) within a pop-up window. Attempted relative positioning to move the image precisely, but facing difficulties. Decided to go with absolute positioning instead, nesting a div within another div as shown below: ...

htmlcssimagecss-position

Struggling to store timestamp in SQL database using form input

My goal is to capture and save the current timestamp of the video once I click submit. However, the table only saves 0 and I am unable to retrieve and store the current timestamp of the video in the SQL table. Although it is displayed, it is not being save ...

phphtmlsqlajax

Customize CSS based on user's device in Google Script Web App

Seeking Clarity: I have a straightforward project involving a Google Script / Web App, but I am struggling to find a way to load a specific CSS file based on the user's device. In other words, rather than focusing on responsive design, I need to loa ...

javascripthtmlcssgoogle-apps-script

When using jQuery, the onChange() function can be used to switch focus

Make sure to check out this fiddle first: http://jsfiddle.net/7Prys/ I am looking for a way to automatically focus on the next input field when a user enters a value in the previous field. This should happen until the fourth input field. Is there a simple ...

jqueryhtmlcss

What is the best way to enclose a parent div around a child div that has been

I'm struggling to figure out how to make the headerLinks div encompass both headerLink divs so that I can adjust the links' positions and margins as a group. Is there a better approach I should be taking? If so, could you provide guidance on how ...

htmlcss

Jquery click event only firing once

My challenge is drawing lines between two points, although I've managed to do it once. The issue arises when I try to repeat the process; nothing happens on the second click of a circle. Please note that this functionality only works in modern brow ...

jqueryhtmlcss

Exploring ExtJS: A guide to accessing a specific DIV element using its unique id

I have a variable in EXTJS containing the following HTML code: var test = '<html><body><div class="myDiv"> This is a test div. </div></body></html>'; I am struggling to access the class or id of this element ...

htmldomextjselement

Utilizing nested components with distinct styling techniques

I have a react component that accepts the size prop as either small, regular, or large. Depending on the size, a specific CSS class is assigned to style the component accordingly. Here's an example of how these classes are defined: .my-component { ...

cssreactjssass