CODEWITHSUNDEEP
csstwitter-bootstrapposition
nclsvh
nclsvh

Reputation: 2868

Check when elements expand parent width

Not sure how to explain this but here I go:

enter image description here

I have 2 buttons (variable width, depending on the text inside) which are positioned next to each other (picture on top). When I make my screen smaller (picture at bottom), the buttons expand the parents width and position below each other. Is there a way to check when this happens?

I want to set a margin (so buttons don't stick to each other) and set a fixed width, ONLY when the buttons are positioned below each other, because of design reasons.

As far as I know, each browser renders a little bit different, and I also want a solution that will keep working when I decide to change the buttons text.

How would you do this? Is there a plugin or a simple jQuery script that can check this?

This is what I have so far: JSFiddle

<div class="cta-buttons-wrapper text-center">
  <a href="/profiles" class="btn btn-primary">this is button one</a>
  <a href="/register" class="btn btn-primary-reversed">and button two</a>
</div>


.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }

.btn{
    margin: auto 25px;
    // ...
}

.btn-primary{
    color: #fff;
    background-color: lightgreen;
    border-color: lightgreen;
}

.btn-primary-reversed{
    color: lightgreen;
    background-color: #fff;
    border-color: lightgreen;
}

Upvotes: 0

Views: 50

Answers (3)

Neelam Khan
Neelam Khan

Reputation: 1121

This can be achieved without the need of a jQuery plugin, in CSS you can declare a media query for certain screen sizes and within that media query you can add different styles for the buttons that would only apply at that screen size, for example if the buttons are not displaying as you wish on mobile screen sizes you would add the below media query that would trigger at screen sizes that are 767px or less, like so:

@media (max-width: 767px) {
  .cta-buttons-wrapper .btn {
    display:block;
    width: 100%; /* this will make the buttons span the width of the parent div */
    margin: 0 0 30px 0;
  }
}

I have declared width: 100%; so that the buttons span the width of the parent div on mobile only and when you add more text it will still look neat, whereas with a fixed width it does not give you that flexibility.

Here is an updated link to your fiddle with my added solution: Fiddle

Upvotes: 1

vedankita kumbhar
vedankita kumbhar

Reputation: 1490

If you don't want to stick buttons add following css

.cta-buttons-wrapper .btn{ margin: 10px 15px; }

And for button width you need to set specific width for that using media query

@media (max-width: 767px) {
  .cta-buttons-wrapper .btn
  {
    display:block;
    width:60%;
  }
}

Upvotes: 1

Nimesco
Nimesco

Reputation: 720

You can simply do this with CSS.

@media (max-width: 767px) {
   .btn {
     margin: 25px;
   }
}

Upvotes: 0

Related Questions