Home/ Questions/Q 9296863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T21:55:40+00:00

I’m using Twitter Bootstrap with responsive design , so on virtually any device /

  • 0

I’m using Twitter Bootstrap with responsive design, so on virtually any device / screeen size or density all Bootstrap elements have dimensions / font sizes fit to screen size.

But, what about my own, non-framework elements? How should I style them to follow responsive design and look the same? For example — images. What dimension it should have and how to style it, so it would look the same on both desktop computer and mobile phone?

I had this issue with 250x250px image. On mobile website emulator on my desktop computer, it filled over half of the screen (emulator assumes medium screen size for emulated device). But when I opened this page on my Galaxy Nexus (with huge XHDPI screen densiy), 250x250px image looked just tiny.

Size are not the only problem. How to set margins / paddings of above mentioned image. so page would look quite identically on many devices. If I display that image on my desktop computer / Full HD sceen, I have nearly 2000 px of width. On Galaxy Nexus in portrait mode I’ll have less than 1000 px width to use.

I’m medium or beginner in CSS and a complete ignorant (beginner) in mobile development / resposive design, so this question may seem dumb. Sorry!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just use the meta tag that automatically proportions everything based on the viewport:

    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    Place the above line on your <head> tag, and the margins, padding, and text should look good.

    Images should also be proportionate, but for things like large background images on the body or large divs, you would need to alter the bootstrap-responsive.css file to bring in the ‘right’ image. So you may want a large background image for desktops and large laptops, a medium size image in a different spot for tablets, and a seamless pattern image for smartphones. Just look for the @media portions of the file and add/edit the css.

    • 0