Looking to make background same width as content - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 28, 2024 at 1:56 pm #1435742

st
Participant

Regarding the three similar columns each with a photo and special heading (Seniors, Family, Corporate) on the homepage.
I added a background color to each column so it appears that only the special headline is in a gray box the exact width of the photo above. I get the desired effect on desktop but on mobile the gray background is larger than the width of the photo. Should I have done this a different way or is there code I can add so the gray background is responsive and only as wide as the image on all devices?
Thanks!

February 28, 2024 at 6:53 pm #1435786
Rikard
Keymaster
Hey st,

Please try the following in Quick CSS under Enfold->General Styling:
```
@media only screen and (max-width: 767px) {
.av-e5u5y-876335338cd19e8230fc02bf621b4040 .flex_column {
  max-width: 300px;
  display: table;
  margin: 0 auto;
  margin-bottom: 40px;
}
}
```
Best regards,
Rikard
February 28, 2024 at 10:11 pm #1435813
st
Participant
That worked perfectly. Is there a way to center them, mobile only?
- This reply was modified 9 months ago by st.
- This reply was modified 9 months ago by st.
February 29, 2024 at 10:56 am #1435853
Rikard
Keymaster
Hi,

Please try this CSS instead:
```
@media only screen and (max-width: 767px) {
.av-e5u5y-876335338cd19e8230fc02bf621b4040 .flex_column {
  max-width: 300px;
  display: table !important;
  margin: 0 auto !important;
  margin-bottom: 40px !important;
}
}
```
Best regards,
Rikard
February 29, 2024 at 2:40 pm #1435887

st
Participant

Thanks Rikard that is perfect.
You can close.

February 29, 2024 at 5:02 pm #1435901

Rikard
Keymaster

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Looking to make background same width as content’ is closed to new replies.