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

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?

The browser should load style.css on its own, so you can serve that as a route: app.get('/style.css', function(req, res) { res.sendFile(__dirname + "/" + "style.css"); }); However, this would get...

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

It's there in the CSS: .normal #nav { -moz-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); } The text is skewed in the reverse direction to make it look...

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

You use the :valid pseudo class. To shamelessly copy the code from https://developer.mozilla.org/en-US/docs/Web/CSS/:valid: input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; }...

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

The problem you are having is that the purple div is wider then the screen, so it adds the bottom scroll bar. One way to fix this is to wrap...

How to remove class using CSS

No. CSS can't modify the DOM, only its presentation.

How to place div on top of responsive rotated div?

I placed the decorative images inside the center .box element and straightened them by giving them the opposite rotation to their parent, i.e. rotate:-45deg. The main problem with this approach...

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

You could place the item inside a ul inside the li instead of using a div like <ul> <li> <ul><li></li></ul> </li> </ul> then position:absolute; the embedded <ul> and push it...

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

Assuming this HTML <div id="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div> and this CSS: #wrapper > div { float: left; margin: 0 10px; } Then, use this CSS instead: #wrapper > div...

How to add multiple css files to CKEditor editorarea

I recommend to use the config.contentsCss property in your ckeditor config, to set a specific css file or a list of css files. See API Docs: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss Since version 4.4...

Show missing CSS in Google Chrome

There is no such thing as "missing CSS selectors" since you can use classes and IDs for other purposes other than styles. But you can detect unused CSS rules (as...

How to Prevent Linke break for Divs in CSS?

Rajasekar, Stu Nicholls of CSSplay has the following horizontal menu without using floats: CSS .menu {display:inline-block;} .menu {display:inline;} .holder {display:table;} .menu { display:table-row; padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li...

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

By default, each and every element is as much wider as its content would take space so you donot need to write any code for that, just remove any code...

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

Simple MVP const buttons = Array.from(document.querySelectorAll('.button')) const count = buttons.length const increase = Math.PI * 2 / buttons.length const radius = 150 buttons.forEach((button, i) => { button.style.top = Math.sin(-Math.PI /...

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

Quoting from the documentation: Note that when you stream data, the request context is already gone the moment the function executes. Flask 0.9 provides you with a helper that can...

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

As far as I see, the image should be placed in the center of the screen. This could be done by using an outer div for background and center the...

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

One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them...

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

//partial css search with "*" By regExCss = By.cssSelector("[ng-style*='background-image']"); List<WebElement> children = driver.findElements(regExCss); // And if you want to print every child(possibly some attribute) // do a loop int count...

Show different button on page load via Jquery

Let's try to clean your code a little. Let's suppose that toggle is a boolean variable defined previously in the page although this is bad and you should use view...

How do I implement a MailChimp API form embed?

Your form is ok, and you need to implement a handler for subscribing like; subscribe.php <?php if (empty($_POST["newsletter_email"]) { die("You should provide email!"); } else if (!preg_match( "/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z] {2,4}$/i", trim(...

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

I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class. Thats kindof...

How to restore color in css after mouse leave?

You need to add css for the visited state of the link, which is what is applied after it has been clicked. Something like this: .navbar-nav > li > a:visited...

How do I place a
beside an image?

You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up...

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

Resize the image to fit the div size. With CSS3 you can do this: /* with CSS 3 */ #yourdiv { background: url('bgimage.jpg') no-repeat; background-size: 100%; } How Do you...

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

Answer to Q1 found here: What does the ">" (greater-than sign) CSS selector mean? You appear to have a misunderstanding of the child combinator. The remaining questions are regarding best...

How do I use CSS to reposition this image?

You can always cheat and position the image yourself fudging values until it lines up(if you can't find a nicer way) http://jsfiddle.net/vTCHW/ Tested in FF, IE 8/9 and Chrome img...

How to apply css to buttons inside gridview

why don't you use .gvwList button{} Check what it is rendering on the browser and make a css accordingly. If it is rendering as anchor then you can use .gvwList...

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

What about a custom styled wrapper? HTML: <div class="select-wrapper"> <select> <option value="" disabled selected>Select your option</option> <option>First option</option> <option>Second really really really long option</option> </select> </div> SCSS:...

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

than use #navbar li a:hover{ color: #f3a82e; } instead of this #navbar li:hover > a{ color: #f3a82e; } http://jsfiddle.net/fp5TM/1/...

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

Use the content property in ::after or ::before pseudo-element to add additional text. You can also position it elsewhere with absolute and top/bottom,left/right properties. #site-title::after { content: "Another Title"; /*...

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

The only solution I can image is to use two elements within the element that contains the text. Then using float:right can seem like one. If you want to position...