Keep individual sidebar widgets same width as each other yet responsive

[Suzanne]

Hi,
I have four text widgets in a sidebar that all need to be the same size as each other (around 225px each). Right now I have them set to a fixed width. The problem is when I resize the screen to the midrange area (laptop size?, larger than tablet), the left sidebar widgets lay over top of the body/content area text.

I know they do not resize because they are fixed width, and I know something with the breakpoints should be adjusted, but I don’t know what to do to make it look right.

How do I keep the four text widgets all the same width AND responsive?

Here is a link to a page in my site: https://tinyurl.com/h94tt6d

GeneratePress 1.3.46

GP Premium 1.2.96

[Tom]

Hi there,

What element are you adding the fixed width to?

Typically, fixed widths are no responsive, and as you said need to adjusted at specific breakpoints.

For example:

@media (max-width: 900px) {
    /* CSS in here once we hit 900px width */
}

@media (max-width: 768px) {
    /* CSS in here for mobile */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Suzanne]

Thank you so much!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts