The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making this css box responsive?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #188205


    I’ve created a social buttons box at the bottom of the content of my responsive design. The only problem is it’s static in width and destroys the responsiveness of my design.

    This is the code I’ve created:

    How would I go about making it responsive to the width of the screen?


    You request is a little vague.

    What would you like it to look like at various widths?

    Elements don’t have to be responsive if they fulfill a specific purpose such as holding icons, links etc. …it’s how they interact with other elements that counts.

    However, if you need the element to be flexible start by removing the fixed px width(s) and replace them with % based values…then adjust as required.

    Your JSfiddle demo seems incomplete…did you omit loading the images, fonts etc?


    Apologies, I’m not very aware of how css elements function.

    This is an updated version of the jsfiddle, the only thing it’s missing is the text that says “Like us on Facebook LIKEBUTTON or follow our private account FOLLOWBUTTON” which I didn’t think was necessary to add.

    Basically I want to maintain the proportions it has “580px width” in regular sized screens but when the screen is smaller and the theme becomes responsive and minimizes, it doesn’t push all the main content element to the side by maintaining that fixed width and instead scales down to a relative size where it still display the like text and button nicely with the wordpress post content wrapper.


    If you need the element to be narrower on smaller screens use media queries and, as I said, where you had fixed px widths swap them out for % values.

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