Materialize card resizing feature allows for easy adjustment of card

I am attempting to utilize 3 cards to showcase the most recent news on my site. It looks great on a wide screen like this https://i.sstatic.net/50Dbm.png

However, when I resize the page, the content overflows from the card.

This is the code snippet:

<div class="row">
    <div class="col s4">
      <div class="card small">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>  </div>
        </div>
      </div>

      <div class="col s4">
        <div class="card small">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">group</i></h2>
            <div class="card-content">
              <h5 class="center"><?php echo $children[1]->title; ?></h5>

              <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
            </div>  </div>
          </div>
        </div>

        <div class="col s4">
          <div class="card small">
            <div class="icon-block">
              <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
              <div class="card-content">
                <h5 class="center"><?php echo $children[0]->title; ?></h5>

                <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
              </div>  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
htmlcssmaterialize

Answer №1

If your cards are resizing unexpectedly, check if the "small" class is applied to them. Removing this class should allow the cards to resize based on their content. Remember that in Materialize, classes like "small," "medium," and "large" limit the height of the card regardless of its content.

To improve responsiveness, consider adjusting your column classes as shown below and wrapping your content in a "container" div for better alignment and containment:

<div class="container">
 <div class="row">
  <div class="col s12 m4">
   <div class="card">
    <div class="icon-block">
      <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
      <div class="card-content">
        <h5 class="center"><?php echo $children[2]->title; ?></h5>

        <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
      </div>  
     </div>
    </div>
   </div>

  <div class="col s12 m4">
    <div class="card">
      <div class="icon-block">
        <h2 class="center brown-text"><i class="material-icons">group</i></h2>
        <div class="card-content">
          <h5 class="center"><?php echo $children[1]->title; ?></h5>

          <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
        </div>  
       </div>
      </div>
     </div>

    <div class="col s12 m4">
      <div class="card">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[0]->title; ?></h5>

            <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
          </div>  
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

To resolve the issue, try placing the .icon-block div inside a .card-content. If the problem persists, consider removing the .icon-block class to observe the card's behavior without it.

Utilizing a div with the class .card-content will provide your card with 20px padding around all content and set an overflow:hidden property for structure.

<div class="row">
  <div class="col s4">
    <div class="card ">
      <div class="card-content">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you encounter display issues on smaller screens, adjust the card layout for medium and small devices to prevent text overlap and improve user experience. Consider modifying the column sizes accordingly to maintain consistent card widths across different screen sizes.

<div class="row">
  <div class="col s10 offset-s1 m6 l4">
    <div class="card">
      <div class="card-content">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Additional columns for other device sizes can be added here -->

</div>

View Working Example

If the issue persists, please update your question with your CSS code for further assistance.

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

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

Show SQL statements in an HTML table format

I have a SQL query code that works in PHPMyAdmin, but I want to display the results in an HTML table. Any suggestions? SELECT tname AS Team, Sum(P) AS P,Sum(W) AS W,Sum(D) AS D,Sum(L) AS L, SUM(F) as F,SUM(A) AS A,SUM(GD) AS GD,SUM(Pts) AS Pts FR ...

phphtmlmysql

Can you explain the process of extracting college ranking data from WSJ using R for web scraping?

Currently, my goal is to extract all 400 entries from WSJ's college rankings using R. I have started utilizing the rvest package in R as indicated below: library(rvest) link <- "https://www.wsj.com/rankings/college-rankings/best-colleges-2024& ...

htmlrweb-scraping

Dynamic CSS columns with a set width on the left and right sides

Dividing my background into two parts has been a challenge. Background Image #1 Endlessly Repeating Background Image #1 Background Image #2 Endlessly Repeating Background Image #2 In CSS, creating a background with multiple elements is not as simple as i ...

htmlcssdynamic

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added. function tagMissions() { if ($('span[id^="mission_participant_new"]').h ...

javascriptjqueryhtmlcss

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

javascriptphparrayshtmlweb

Setting a default currency value (either in dollars or euros) in an input field

Is there a way to automatically insert a currency symbol (€, $) in a text field by default when entering a number? Are there any default values for this feature? Thank you Here is an example ...

javascripthtmlcss

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

javascripthtmlcssblogs

Using AngularJS to interact with neighboring DOM elements

Imagine a scenario where there is a div containing 5 img elements. When one of these img elements is hovered over, the goal is to change the class of all the elements on its left side. <div id="stars"> <img src="star.png" data-rating="1" ng- ...

javascripthtmlangularjsfrontend

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

javascriptjqueryhtmlcss

Is a non-traditional fading effect possible with scrolling?

I have implemented a code snippet to adjust the opacity of an element based on scrolling: $(window).scroll(function () { this = myfadingdiv var height = $(this).height(); var offset = $(this).offset().top; var opacity = (height - homeTop + ...

javascriptjquerycss

When an anchor tag is embedded within a string response, ReactJS fails to render it as a clickable link

I am in the process of transitioning our code from Freemarker to React JS and I am encountering an issue with rendering anchor tags from a JSON string response. When I display this string in my React JS application, the anchor tags are appearing as plain t ...

javascripthtmlreactjsnext.js

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...

javascriptpythonhtmlseleniumselenium-webdriver

Removing characters from a C# string that fall between two specified characters

As an illustration, let's consider a string such as: "//DeleteFromHere <div> <p>my name is John I want to delete this div </p> </div> //DeleteToHere" In this case, I intend to use //DeleteFromHere as the starting ...

c#htmlasp.netstring

I am looking to create a div that can consistently refresh on its own without needing to refresh

I have implemented a comment system using ajax that is functioning well. I am looking to incorporate an ajax/js code to automatically refresh my "time ago" div every 5 seconds so that the time updates while users are viewing the same post. Important note: ...

javascriptcssajax

Adjusting the transparency levels of all div backgrounds simultaneously

Is there a way to uniformly add an alpha value to all the divs on my web page without specifying the exact color code in 'rgba'? I have divs with different background colors and I want to easily revert the changes if needed. Perhaps something al ...

htmlcss

two clicks on the sc-player

I've encountered a problem of duplicated events when using sc-player.js. I'm trying to change an iframe when a li element is clicked, but the play/pause buttons also trigger the same li click event. Is there a way to control the play/pause funct ...

javascriptjqueryhtml

Efficient method for populating a table dynamically with JSON data using JavaScript

While experimenting with jQuery, JSON, and other technologies, I encountered a task where I needed to retrieve table data in JSON format from a loader script on the server and populate my table with it. Currently, I am using code similar to the following s ...

javascriptjqueryhtmljsondom

The same bootstrap column code shows varying behavior

This week, I delved into learning HTML with the goal of creating my own website using bootstrap. However, I encountered a perplexing error - code that should display two pieces of text on the same line is behaving inconsistently for seemingly identical sni ...

htmlcssbootstrap-4

Alignment of the button in a vertical position

Hey there! I've got a button set up with Bootstrap for centering, but now I'm looking to vertically align it in the middle of the page without any margin or padding. Any ideas on how to go about doing that? Here's the HTML code: <div cl ...

htmlcssbootstrap-4