Streaming live at 10am (PST)

Need help with custom breakpoint structure on Desktop view


#1

Hello Webflowers
Anybody know how I fix this? The client's computer sees it as the buttons collide.

SITE & READ ONLY LINK


Here is my public share link: LINK
(how to access public share link)


#2

Hey @krubens could you please update your post with a read-only link so that we can help you faster?
How to Share a Read-Only link to my site: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :smile:


#3


#4

Shure :smile: HERE


#5

Hi @krubens, since the columns do not collapse prior to the Tablet Breakpoint, to have those buttons collapse on Desktop view, I would suggest to not use columns, but rather div blocks like so:

For each div block, give a class and 33.333% width, style with inline block and float left:

Next add some custom code to the Head of your site, for the custom media query that targets the divs at the breakpoint you wish. In this example, I have used a breakpoint to target the "buttons-div" in the example at 1250px to set the button-div to Display Block and width of 100%. When the page gets to 1250px, the divs will collapse and be on top of each other.

<style type="text/css">
      @media screen and (min-width: 1250px) {
        .buttons-div {
          Display: block;
          Width: 100%;
        }
      }
 </style>

I hope this option works for you, until there are additional break points or ability to add more breakpoints.


#6

That is awesome, thank you!.

I guess the code should be MAX-with 1250, not min?
and, I would like the box to be 80%, but how do I center them in the code? I tried just, position: center. but that didn't work.
I probably have to put the button div's in another div and center them? or...hmmm


#7

Hi @krubens, the code should be using min-width if you want the change to trigger at the 1250px breakpoint (from some higher resolution).

Which box do you want to be 80%? If you plan to have all three div blocks be within an 80% container that is centered, I would first put the divs inside of another div block with a class that has a width of 80% and margin left and right set to auto. this will center the parent div within the container you are using to put the other elements (header etc).

Once you have updated some changes, let me know and I am happy to take a look :smile:


#8

Hmm.. but. If its min, the div block are block and 100% higher than 1250px, but if I take resize the window they go back to inline block.
See gif under.

EDIT
I tried to put the divs in a div, and center it. Doesn't seem to help though.
LINK SITE


#9

Hi @krubens, thanks for the update. I see you have the button width to be 80%. You should set the button-div width to 33.33% on Desktop view.

If you want the parent div to be 80% that is fine, you can set the dic-content-wrapper class to 80% with left and right margin set to auto to center the parent element. The three divs inside of the parent div at 80% can each be 33.333% of the width of the parent element.

Also, set the css so that the button-div changes to 100% width, so that the button fills the parent element when the width of the site reaches 1250px. Currently set to 80% width, the same as the style in the designer, so no change would take place.

Could you try that? I will be happy to take another look at the result.


#10
  • Button div width is now set to 33.33% on desktop view
  • Button is now auto
  • Div Content Wrapper is now 80% with Auto Left and Right Margin
  • CSS is changes to 100% with

Now it gets centered, thank you!

But for the CSS code, it must be a misunderstanding. When the Browser window is bigger than 1250px I want the buttons to be on row, like this - - -
But when the browser window is smaller than 1250px I want the buttons to be stacked, like this
-
-
-

The only way I get that effect is if the css sais max-width: 1250 px

Or am I crasy? :smile:


#12

The custom CSS is now as you suggested. min-width: 1250px
So everything is opposite. Big window, stacked. Small window, row. You don't see the same?
This is what happens at my end:


#13

Hi @krubens, sorry I must not be thinking so clearly on a sunday :smile: You are right. The max-width is the thing to use here in this case since you only want the buttons to be collapsed on 1250px and below. Sorry I was thinking of something else, my apology.


#14

Hehe... no problem, I just started wondering if my browser was crazy :smile:

Thank you so much for your help. And on an sunday!

And yes, please, please give us the option to set more breakpoints.


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.