responsive-design

Responsive - text on image

匆匆过客 提交于 2019-12-12 01:22:55
问题 I have problem with responsive design. I try to display text over the box in image, but when I resize browser text is outside the box. My picture: .row6 { background: none; width: 100%; height: 130px; border: 0px salmon dotted; font: bold 1.7vw arial, sans-serif; margin: 20px auto; } .row6 > div { position: relative; top: 8px; width: 100%; height: 100%; margin: 0 auto; background: url(images/background.png) no-repeat; background-size: 100% } #dd7 { margin-left:44.7%; width:45px; text-align

Managing text columns in responsive layout

旧巷老猫 提交于 2019-12-12 01:16:22
问题 I'm working on a site that uses a responsive layout and I've run into a problem getting around the shortcomings of the newer CSS multi-column properties (http://dev.w3.org/csswg/css3-multicol/). When the browser window is wide enough, I split the text into two columns with an sidebar for smaller images. The multi-column css properties work great, but they're not too smart. The first section is split evenly into two equal-height columns, but they're way too tall. For someone to read this

Responsive CSS div positioning priority

五迷三道 提交于 2019-12-12 00:59:04
问题 first of all I would like to thank the members of this community for the huge amount of help I found here in last few month. There wasn't a single project of mine which I finalized without your tips and tricks. Right now I got a problem with a responsive layout where I need your kind help: I got a layout like this: http://codepen.io/Buzzjump/pen/tfeys <div class='outer'> <div class='sidebar_links'>Div1</div> <div class='mitte_rechts'> <div class='d2'>Div2</div> <div class='d1'>Div3</div> <

Make a 2 column responsive breakpoint from rows of 3 columns

我只是一个虾纸丫 提交于 2019-12-12 00:36:03
问题 I have two rows containing tree columns each. On a Responsive breakpoint, I'd like to switch to tree lines of two columns. Due to the initial structure, this does not seem possible (I can only make 1 colum rows, or tree column rows, bot not two column rows). No JS please... How is this usually solved? DEMO HERE CSS .col { float: left; width: 33.33%; background: red; text-align: center; } @media (max-width:500px) { .col { width: 50%; } } HTML <div class="row" style="overflow:auto;"> <div class

Image Size via CSS

﹥>﹥吖頭↗ 提交于 2019-12-11 23:38:48
问题 I have this lines below for a reponsive site, I need to put "no-image" class when there is no image, <div class="row"> <div class="column"> <img id="first" width=275 height=385 src="flower-275x385.jpg" /> <img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" /> </div> </div> <style> .row { width:400px ; } .column { width:50% ; } .column img { width:100% ; height:auto ; } .column img.no-image { background:red url(image-pending.jpg) no-repeat center ; } </style> The problem

Browser Do Not Take Care Of IMG Element Based Size

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-11 23:38:10
问题 I have been experimented this problem recently; <div class="row"> <div class="column"> <img id="first" width=275 height=385 src="flower-275x385.jpg" /> </div> <div class="column"> <img id="second" width=100 height=400 src="flower-275x385.jpg" /> </div> <div class="column"> <img id="third" width=500 height=150 src="flower-275x385.jpg" /> </div> <div class="column"> <img id="fourth" width=75 height=150 src="flower-275x385.jpg" /> </div> <div class="column"> <img id="fifth" width=750 height=550

Responsive grid not adapting to screen sizes. How do I call the script?

旧巷老猫 提交于 2019-12-11 23:33:40
问题 I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work. My questions are: What script do i need to call these css styles? And, Does these help me to detect the screen size of the user? (I think web browser size

Responsive images and negative margin

孤街醉人 提交于 2019-12-11 23:23:40
问题 I have a site where I have an element with padding. I want the images to be the full width of the container regardless of padding, so I have added a negative margin equal to the padding to make it stretch right to the edge. The problem arises when I use responsive images. They ignore the negative margin and squish down to the container size plus padding. Example: <article style="padding:20px"> <img style="margin:0 -20px;"> </article> In a non-responsive world this works fine. How would I

CSS -align 3 responsive Divs- left right with position fixed and center normal

痞子三分冷 提交于 2019-12-11 22:13:04
问题 i just cant make those left right fixed divs responsive. 3 divs : |fixed| |normal| |fixed| those 3 divs are in one div. if im going on full scale window they are working perfectly, but as i down size the window it's screws the all thing up. i dont know how to fix that- my center div working perfectly- responsive and centered. but the left and right fixed just wont be responsive as well. i guess the solution is connected to responsive width of the fixed divs.. any ideas? i added JSFIDDLE

Responsive JavaScript – load/hide specific function related to browser width?

冷暖自知 提交于 2019-12-11 21:58:49
问题 first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do. i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want: browser-width LOWER than 500px = load this function: $('#slider4').bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 230, slideMargin: 10,