Archived topic
Keep individual sidebar widgets same width as each other yet responsive
3 replies · Started by Suzanne on March 21, 2017
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
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 */
}Thank you so much!
You're welcome :)
