fixed position stuff in margin separate css for which browsers

by 4 replies
6
I recently worked on a wordpress site where the owner wanted a few changes. At the last minute he asked me to add a fixed position image in one of the margins.
Small job- no problem except that it doesn't display the same horizontally n different size screens due to the nature of the rest of the site. Worse, in a cell phone you can only see the top half of the image and since its fixed you can never see the bottom.
If I were to offer him separate css versions for popular screen sizes, what would be a good package of sizes to offer?
#website design #browsers #css #fixed #margin #position #separate #stuff
  • Check this out:

    Browser Display Statistics
    • [ 1 ] Thanks
  • The best approach (in my opinion) would be to offer the client a "responsive" redesign which automatically transforms its layout to best fit the device viewing it.

    With responsive css, you can establish "break points" at common screen sizes and reformat the layout accordingly.

    For example, if you click on the "Rdio Remix" demo site link in my sig below, you can resize the browser window in order to see how the layout responds to different screen sizes. There is only one css file (responsive.css) that contains the break points.

    Each break point has custom css to control the layout at that size.

    This smashing magazine article gives a good primer on some of the most logical breakpoints that you can include in your responsive.css
    • [ 1 ] Thanks
  • Not sure how relevant this is in your scenario, but you could try using percentages instead of pixels for top and bottom attributes. If the site is responsive, having a fixed image could be very intrusive. Might be an idea to only show it on browser sizes that are bigger than a certain size using media queries.
    • [ 1 ] Thanks
    • [1] reply
    • I actually tried using variable widths for the image. The problem was that there were too many calculations in the chain and it didn't position where it was intended to.
Join the discussion

Next Topics on Trending Feed

  • 6

    fixed position stuff in margin separate css for which browsers

    I recently worked on a wordpress site where the owner wanted a few changes. At the last minute he asked me to add a fixed position image in one of the margins. Small job- no problem except that it doesn't display the same horizontally n different size screens due to the nature of the rest of the site. Worse, in a cell phone you can only see the top half of the image and since its fixed you can never see the bottom. If I were to offer him separate css versions for popular screen sizes, what would be a good package of sizes to offer?