[Resolved] Keep individual sidebar widgets same width as each other yet responsive

Home Forums Support Keep individual sidebar widgets same width as each other yet responsive

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #295371
    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
    #295530
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #295730
    Suzanne

    Thank you so much!

    #295841
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.