Materialize Frame Work- overflowing div issue when resizing screen

Hi everyone,
Hope you’re all well.

I am trying to create a div taps using materialize gridding system and I have these issues:

  • the two divs overlay when I resize to somewhere in between large and medium screen size
  • the gap between the two divs are not fixed when I resize to a screen size somewhere in between small and medium screen size

Noted:

  • my laptop screen size is 17"
  • resize the screen to see what happens

link to my source code: https://codepen.io/neopermatrix/pen/pwVGPL

It’s interesting to see someone have a Materialize question since I just began “playing” with Materialize yesterday.

From what I can see, the grid classes you are using are not correct. Here is HTML that works (it does not put a margin between the divs but it is responsive. Margins and padding can be added with a little CSS. If you want it to be full width, just remove the container division:

<div class="container">
  <div class="row">
    <div class="col s6 m6 l6 blue">
      <a href="#" class="white-text">flex item 1</a>
    </div>
    <div class="col s6 m6 l6 blue">
      <a href="#" class="white-text">flex item 2</a>
    </div>
  </div>
</div>

Here is the Materialize grid page: http://materializecss.com/grid.html

If you’re interested, here is what I’ve done with my first attempt at using Materialize: https://codepen.io/mkmanges/full/ZyxNJV/

I’m going to use it to create a Materialize reference page.

Hi Michael,

Thank you so much for your response. I indeed appreciate it.

I’m sorry I have made some reckless mistake with my Codepen link. The HTML code in the Codepen link that I shared was not the one which I want to ask for help. I first got the right HTML code onto that Codepen link, but later that day I tested another code on that same link. I didn’t know it automatically saved. Therefore, it showed you the wrong HTML code. I’m sorry.

Here is the Codepen link with the right HTML:

Noted: Please resize the screen to see the overlaying.

I played with your code and I see what you mean. I have a 24" monitor and the yellow button is landing on top of the green button.

When I take the padding out, the problem went away. However, that is not the look you are going for. I found two things that worked:

  1. Set the desired padding and set the #Tap1 column to l2 and the #Tap2 column l2 or greater. This probably messes with the spacing between the buttons, but it works. If it helps, you can add right-align class to the green button. It pushes the buttons closer together.

  2. Leave the columns assignment as they are but make the font-size smaller. This makes the button smaller. I think option #1 is better.

This tells me that the size of one column is too small to hold the promotion button when you use a container… it needs at least 2 columns. The extra padding must push it past one column. Removing the container division also fixes the problem since without the container, the column widths increase.

Probably not what you’re looking for. I’m learning that frameworks are great but in some ways they have limitations similar to using a template. We have to creatively find a way to within those limitations.

Thank you, Michael. I have tried both of the solutions. Yes, the first one is better.
You’re giving me a really helpful idea to look at this problem. I will try to play around with it.
Hopefully, I can find a way that works out.

1 Like

No problem. I find that I learn a ton trying to solve real problems.

I am really liking the Materialize framework. I’m a professional photographer and I have a Squarespace site that I love but I’m thinking about replacing it with a site built on Materialize. I just added an image carousel to the reference site I’m putting together and it looks amazing! It’s also the easiest carousel I’ve ever worked with.

1 Like