responsive-design

问题 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

问题 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

问题 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> <

问题 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

问题 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

问题 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

问题 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

问题 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

问题 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

问题 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,