How do I get the containers with the same width?

[Il Domandatore]

On the desktop, the containers are the same width.
https://postimg.cc/7GX72m2H

On the other hand, on the mobile phone the dimensions are different and I don't know how to do it.
https://postimg.cc/06jqvN0V

The page is https://oldfreegame.com/en/campaigns/extend-the-website-contract/donate/

[Ingolme]

The email address is too wide and causes the box to stretch. You can use the overflow-wrap rule to fix it.

fieldset {
  overflow-wrap: break-word;
}

I can't use a more specific selector since I don't know what the HTML on the details page looks like.

[Il Domandatore]

I don't think email is the problem.

https://imgur.com/a/Y3sbAmX

[Ingolme]

The problem in that screenshot is that you've set the width of those options to 300px, so it is not permitted to get any smaller.

Delete this from your stylesheet:

.charitable-donation-form .donation-amounts .donation-amount {
    height: 150px;
      width: 300px;
    color: #000000;;
    border: 0;
    background-color: #ababab;
    border-radius: 99px;
    padding: 2px;
    text-align: center;
      margin: 6px;
}

And also this:

ul.donation-amounts {
    width: 300px;
}

[Il Domandatore]

I did. I guess you want to put a min-width. :) I tried, but then I can't seem to center the buttons.

[Ingolme]

max-width would be the proper replacement. If you set min-width you will still have the problem that the element is not allowed to be smaller than 300px and then doesn't fit in the screen.

[Il Domandatore]

We are sure? Don't I end up finding the desktop version limited to 300 px? Min-width would make sense, but you're the expert.

Tell me, what should I write or modify the CSS?

[dsonesuk]

You can use media queries to adjust width according to device width

[Il Domandatore]

Ok, writing what with the media query? I don't know how to solve the problem I asked you. Or was it enough to remove the width of two CSS codes?

[Il Domandatore]

Done. You can close.

[Il Domandatore]

I tried the email solution, but it didn't work.

 

p.donor-contact-details {
    overflow-wrap: break-word !important;
}

https://oldfreegame.com/en/campaigns/extend-the-website-contract/donate/

[Il Domandatore]

@Ingolme I put the code you suggested, but it didn't take effect. I tried other changes with the word break and the container gets shorter. As you can see, this is not the problem, because the payment container is shorter.

https://imgur.com/a/q4rkzzE

 

 

[dsonesuk]

First you need to get parent container to be responsive and adjust to full width of device whether portrait or landscape orientation. Then how many colums to have to accommodate the content, this is can be for example 4 for wide width device such as desktop, 2 column device tablet and finally single column for moble phone.

You use css media queries to identify device width and adjust width of 4 columns 25% desktop, 2 columns 50%, tablet, 100% width 1 column mobile OR any widths you want! If the content wont fit on one line you have no alternative  but to let it go to two. You could aways adust rows to allow 2 lines of content set min-height to allow this so 1 line of content is centred vertically. Again! You can set this to happen on smaller width devices using media queries for specific width of device, also change font size etc.

[Vincent Lee]

On 12/3/2021 at 5:27 PM, Il Domandatore said:

On the desktop, the containers are the same width.
https://postimg.cc/7GX72m2H

On the other hand, on the mobile phone the dimensions are different and I don't know how to do it.
https://postimg.cc/06jqvN0V

The page is https://oldfreegame.com/en/campaigns/extend-the-website-contract/donate/

If you want to adjust width based on device width, you can use media queries