Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]


Tags: css,responsive-design

Problem :

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!



Solution :

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.


    CSS Howto..

    express: how to send html together with css using sendFile?

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    How to remove class using CSS

    How to place div on top of responsive rotated div?

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How would can i keep horizontal divs (3 in a row) with margins inbetween them inline with wrapper?

    How to add multiple css files to CKEditor editorarea

    Show missing CSS in Google Chrome

    How to Prevent Linke break for Divs in CSS?

    CSS: how to make a span only as wide as its content

    CSS/Javascript: How to make rotating circular menu with multiple states?

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to use image tag in body of html instead of loading image from css?

    How to fix when someone edits css output of an existing sass file

    How to make a list of “background-image” CSS using WebDriver with Java

    Show different button on page load via Jquery

    How do I implement a MailChimp API form embed?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    How to restore color in css after mouse leave?

    How do I place a
    beside an image?

    Background images: how to fill whole div if image is small and vice versa

    How do I target nested elements with CSS correctly? [closed]

    How do I use CSS to reposition this image?

    How to apply css to buttons inside gridview

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    How to stop this parent element from being affected on hover?

    How could I add a header to a HTML page via CSS?

    CSS-3 - How can I place a white space holder above two columns?