Forums

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
    Posts
  • #188205
    lvvvvvl
    Participant

    Hello,

    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: http://jsfiddle.net/9th3dLgu/

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

    #188206
    Paulie_D
    Member

    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?

    #188208
    lvvvvvl
    Participant

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

    This is an updated version of the jsfiddle http://jsfiddle.net/9th3dLgu/2/, 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.

    #188209
    Paulie_D
    Member

    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.