Cookie message and buttons at the same line

Hey Michael,
Thank you for the link to your sites, as I understand your request you would like the two cookie consent buttons to always be side-by-side (inline) and the cookie consent text to be inline next to the buttons, but at smaller screens the text should become multiple lines and still inline with the buttons.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field for each site:

.avia-cookie-consent .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.avia-cookie-consent .avia_cookie_text {
  flex: 1;
  white-space: normal;
  margin: 0;
}

.avia-cookie-consent .avia-button {
  display: inline-block;
}

This is the expected result that I see when I test:

Best regards,
Mike

Hi,
If you want the text on the first line and the buttons on the second line, please remove the css I posted above, for this is the normal state of the cookie bar, please see your site below that you did not add the above css to.

Best regards,
Mike

Hi,
Then try adding a media query so the css above will only work on desktop, like this:

@media only screen and (min-width: 1920px) { 
.avia-cookie-consent .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.avia-cookie-consent .avia_cookie_text {
  flex: 1;
  white-space: normal;
  margin: 0;
}

.avia-cookie-consent .avia-button {
  display: inline-block;
}
}

adjust the screen width to suit (min-width: 1920px)

Best regards,
Mike

Hi,
On your site you have this css:

.avia-cookie-consent .container {
    float: none !important;
    padding: 0 !important;
}

Please remove the padding: 0 !important;

Best regards,
Mike

Hi,
When I check gruetter-innenausbau.ch the mobile looks as you wish right now:

So if you only want the text and buttons to be side-by-side on desktop, like this:

then you would use this css:

@media only screen and (min-width: 1920px) { 
.avia-cookie-consent .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.avia-cookie-consent .avia_cookie_text {
  flex: 1;
  white-space: normal;
  margin: 0;
}

.avia-cookie-consent .avia-button {
  display: inline-block;
}
}

Please note that the css only begins at min-width: 1920px, if you want it to begin earlier then please adjust. I tested this on gruetter-innenausbau.ch, see the above screenshots, if you are still having problems perhaps you have an error in your other css like a missing bracket, try adding this css to the WordPress ▸ Customize ▸ Additional CSS, assuming you have no other css there, otherwise please examine and test your other css for errors.

Best regards,
Mike

Hi,
Perhaps, what you are trying to ask for is that on desktop you want the text and the buttons to be in one line, and you want the text to also be in a single line, like this:

If this is what you are asking, then please add this css:

@media only screen and (min-width: 1520px) { 
.responsive .avia-cookie-consent.avia-cookiemessage-bottom .container {
    max-width: 1520px;
}
}

Please note that with the amount of text you have this can only occur for desktops above 1520px, otherwise there is not enough room for the text to be in a single line and next to the buttons.

Best regards,
Mike