FAQ Database Discussion Community


Not able to display content in mobile view

html,css3,responsive-design,bootstrap
I have added a lightbox to a webpage, but the content does't show up in mobile view. I am a developer and new to designing, so please help me solve the issue http://www.kahui.org/user/boardmember Will be very thankful for any helpful suggestion...

Implementing a “Mondrian” pattern using Flexbox

css,responsive-design,flexbox
The article 5 Really Useful Responsive Web Design Patterns describes a "Mondrian" pattern for layout on the web that arranges one large box on the left (2/3 or 3/4 width) with a few smaller items, stacked vertically on the right — but then in medium-sized viewports, the design shifts to...

CSS Re-Centering elements on wrap

css,responsive-design
I thought this would be simple but it's proving to be a bit of a headache. I'm trying to get a grid of images to re-center when the user resizes the browser and causes one (or more) of them to wrap onto the next line. I've tried giving the grid-wrapper...

inline and inline-block difference in “responsive web design with html5 and css3”

javascript,html5,css3,web,responsive-design
I came across this question when reading "Responsive Web Design with HTML5 and CSS3" Chapter3 Fluid Layouts. The author was trying to change fixed pixel size to percent-based fluid size. Below is html and css code. html: <div id="wrapper"> <div id="navigation"> <ul> <li><a href="#">something</a></li> <li><a href="#">some other thing</a></li> </ul> </div>...

How to make div's made up into grid stay where they are when one of them becomes larger?

javascript,jquery,html,css,responsive-design
I have a grid of same height tiles that can be expanded on click. To make the rest of the div's stay in their position when one is expanded, I gave it margin-bottom: -100px. However, when a div expands, all below him, just for a second, change their position, after...

How to make page layout responsive for every successive little change in window size?

javascript,css,responsive-design,media-queries
Yes, I know how to use media queries. But it allow us to specify min-width and max-width that is range after which css will change. But consider this website styledotme.com The block/div just below navigation bar keeps getting smaller and smaller almost as if pixel-by-pixel as we decrease window size....

Breakpoints Not Applying Float Rule After Resize

html,css,responsive-design
For some reason, setting up breakpoints with a float rule doesn't seem to be applying when you change the width of your screen. Check out this simple example: .left-content { display: block; margin: 30px auto; width: 130px; } .right-content { display: block; margin: 30px; margin: 30px auto; width: 160px; }...

Zurb Foundation topbar dropdown disappears on small screens

css,responsive-design,zurb-foundation,navigationbar
This is troubling because the only reason I want a topbar is for smaller screens. The dropdown works fine in medium and large, but disappears on smaller screens. I've read it needs to be inside a 12-width column, but that doesn't seem to help. It actually introducted another (minor) problem...

Having problems with responsive widths

html,css,responsive-design
I tried to make a search block that need to be looking like this: Now i want when someone will resize the window, the search button will still be in the same line, so i did: CSS: .search { background-color: #23507c; border: none; outline: none; font-size: 18px; width: 92% }...

Div won't resize vertically in slideshow with CSS queries

html,css,css3,responsive-design,media-queries
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't...

Responsive CSS only working in mobile view, refusing to hide in normal view

css,mobile,responsive-design,haml
I've created two different footers for a page, given them two different ID's, and then written CSS so that one footer is hidden and the other shown for regular browsing, and then the opposite for mobile browsing. You know the drill. @media (max-width: $screen-lg) { #main-footer { display: block; }...

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

mobile,responsive-design,media-queries,viewport,initial-scale
So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have...

how to set a div to 100% width within a parent div that has 40px padding

css,html5,responsive-design
I may have asked this question in a confusing way. Basically I need this: http://www.jayflood.com/layout.jpg I'm sure there are a ton of ways to do this, but my problem lies in working within a preexisting structure. The parent container does not have a set width, but does have 40px of...

Turn this slider really responsive

javascript,jquery,html5,css3,responsive-design
So, what I need do for this slider resize correctly in diferents resolutions, for I get responsive. I tryed that slider The HTML <div id="slider"> <div id="controleplay"> <div id="autoplay"><img src="imagens/pausa.png" width="48" height="48"/></div> <div id="button-next"><img src="imagens/seta_dir.png" width="48" height="48"/></div> </div> <div class="sp" ><img src="imagens/banners/w6-resultados.jpg" width="" height="auto" /> <h2><span> Chegamos e damos boas...

Twitter Bootstrap 3 - Proper way to apply CSS Only to -md (medium) screen sizes?

css,twitter-bootstrap,responsive-design
From my understanding, Twitter Bootstrap 3 considers any -md to be screen sizes whose min-width is 992px, according to this post: Twitter Bootstrap 3: how to use media queries? Now what I want to do is, I want to apply CSS if and only if the screen size is medium,...

Responsively align 50% of a circle on the bottom-center of a rectangle?

html,css,responsive-design,responsiveness
I have a div filling all the width and an amount of the height, and then I have an smaller circle which needs to be half on the bottom/center of this div, half right after it. All works until I got more height or try to zoom it, then the...

Responsive Web Page Scrolling Glitch On iOS

ios,iphone,responsive-design,semantic-ui
I created simple web page using semantic ui library: http://cvhunter.net/m Scrolling vertically is glitching on iphone sometimes especially first scrolling try. How can i fix this ? Thanks....

Split HTML table to fit viewport width

javascript,html,css,responsive-design
I have a HTML table with a lot of columns. I want to split the table to fit the viewport width like so: The basic table | Column 1 | Column 2 | Column 3 | Column 4 ------+----------+----------+----------+--------- Row 1 | (1,1) | (1,2) | (1,3) | (1,4) Row...

Re-arrange column order in mobile view

html,css,responsive-design,multiple-columns
I have a 2-column layout (C1 & C2). Inside C1 I have 3 boxes (B1, B2 & B3). Inside C2 I have 1 box (B4). On mobile view I would like to make the vertical order of the boxes: B1-B2-B4-B3. How can this be done? I'm open to using flex...

How to make HTML table height proportional to its width?

javascript,html,css,responsive-design
I have a HTML table displaying various background images in a number of cells. The table needs to be responsive, so I've set it's width to be 100%. However, I need the table's height to be proportionate to it's width. Say for example 30% of it's width. I've tried the...

Responsive website not able to have 100% width in smaller screen resolutions [closed]

html,css,responsive-design
When viewing http://rayku.com on a mobile device (anything with iPhone 5 resolution or smaller), there is a horizontal scroll bar - how can I maximize the content width so that there is no horizontal scroll bar? http://d.pr/i/epmI There is no min-width anywhere in the css....

Responsive css is not used when frame is used [closed]

html,css,responsive-design,frame
I have a website which is working as expected when resizing my window (responsive css is used) : http://carthera.eu/ But when I'm going on the same website with this url http://carthera.com/ responsive css is not taken into account. I have seen that this url is using a frame to display...

Website not displaying properly in iPhone 6 and iPhone 6+

html,iphone,responsive-design
I am totally new to iPhone coding. I have a website, and it's working perfect in all mobiles and desktop versions, except iPhone 6 and iPhone 6+. Problem is, it is not showing full page, i.e. width and height not coming 100% Can any one guide me what changes I...

Bootstrap table with a sidebar

twitter-bootstrap,responsive-design,html-table
I've been reading about the grid system and played around with my code over and over, but can't get the website to look like how I want it to. I want a sidebar next to a "content" area (basically a table). Here is an image to help the visual. Top...

Is it possible to see which srcset image a browser is using with browser developer tools

html,css,responsive-design,developer-tools,srcset
I've been trying to see which srcset image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can't tell. Using the network tab would usually be fine, but sometimes I've noticed that it will fetch 2...

how to make svg responsive

html,css,svg,responsive-design
I'm trying to make this massive svg responsive. However, it's not working and I don't know why. I tried the following: - setting width: 100% height: auto (the diagram disappeared as soon as I removed the set width/height in pixel, regardless what i put back) - using the viewbox attribute...

Bootstrap position layout error for medium screen

twitter-bootstrap,css3,responsive-design
I am working on a responsive web site, where I'm facing a problem with medium screen. To solve this problem I can't find why this problem occur? In large screen I have image in left side & texts are in right side. But in medium screen text will be in...

create reponsive div 16:9

javascript,html,css,responsive-design
I was creating a 16:9 ratio responsive div , however when I resize the window the container3 still stay with the original size , any problem in my code ? Anyone able to help me ? Thanks $(document).ready(function(){ rp_config(); }); $(window).resize(function(){ rp_config(); }); function rp_config(){ var windowwidth = $(window).width(); var...

Nesting flex box

css,performance,responsive-design,frontend,flexbox
I find flex box really useful, and since I discovered it I am tempted to use it everywhere. Question Is it a good practice to nest flex-boxes? Does having a lot of them and especially nested ones has an impact on performance?...

Bootstrap - 2 column form layout with fixed textarea height and column ordering

html,css,forms,twitter-bootstrap,responsive-design
i'm trying to build a 2 column form layout in bootstrap with an fixed height textarea on the right. I got it working well on desktop screen with an .pull-right-md (own class) on the textarea box. But in "responsive" mode (on smaller screens) I have the problem with the order...

CSS / Bootstrap - font-size not properly resizing from computer to mobile device: Font on Mobile device looks so small

css,twitter-bootstrap,mobile,responsive-design
This is my CSS: @media(max-width:767px){body { font-size: 22px; }} @media(min-width:768px){body { font-size: 20px; }} @media(min-width:992px){body { font-size: 16px; }} When I resize my browser window on my laptop, it properly resizes. But this is my issue: When I visit my website from my mobile device, the font-size is way too...

Scale three images with different widths into a 100% width row while maintaining equal image heights

javascript,jquery,html,css,responsive-design
I have three images which are all different widths, but each the same height. I want these images to be in a responsive row so that the combined width of these three images is 100% the width of the screen, all of the images have equal height, each image maintains...

how to close other submenus and search in a menu?

javascript,jquery,html,css,responsive-design
When a sub-menu is opened, all sub menus besides the current menu should be closed. I want search to appear on the text box and open all items which contain that value and change the color of <a> I wrote this code: $(document).ready(function(){ $("#navigation").click(function () { $(this).next().slideToggle(); }); $("#main-menu>ul>li a...

Can an image flow with text next to a floated element?

html,css,responsive-design
I'm trying to find a simple solution to the following problem without using JS. <div class="wrap"> <p>[...]</p> <div class="mpu"></div> <img src="img-src"> <p>[...]</p> </div> I have a container div with a class of .wrap that is filled with text. Inside this, I have a 300px square div with a class of...

Collapsing table cells in media query for emailing

html,css,email,responsive-design
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious. I'm stuck right now on a seemingly unsolvable problem. Here is the problem : I have a table with 3 columns (column...

Movie Trailer Api result id html not responsive output

php,xml,api,responsive-design,movie
http://trailerapi.com/api/api.php?user_trailer_limit=10&language=en link $api_url_content='http://trailerapi.com/api/api.php?user_trailer_limit=10&language=en'; if(!$xml = simplexml_load_file($api_url_content)) { echo “Error”; }else { foreach( $xml as $film ) { $movie_name= $film->name, $movie_poster =$film->poster; $movie_id=> $film->did; $movie_description=$film->description; $movie_year=$film->year; $movie_producer=>$film->producer; $movie_imdb=$film->imdb;...

Resizing Cycle2 with javascript is making things jittery

javascript,jquery,css,responsive-design,jquery-cycle2
I have a Cycle2 slideshow that I want to dynamically resize on its own when the window width is above 580px. At 580px and less, I want it to take up the height of the screen, minus the header and pager. Here is my markup: <div class="header-container"> <div class="header"></div> </div>...

CSS disable horizontaly scrolling - Wordpress [on hold]

php,html,css,wordpress,responsive-design
Hi im working on a wordpress blog and have the following problem: http://www.catlovers.co/17-cat-reactions-that-sum-up-your-love-life/ If i resize the browser (X-Axies) to a minimum like surfing on a mobile device i am able to scroll to the right in the Contend section (hold down middle mouse button). How can i change my...

How to set element height but stay responsive?

css,twitter-bootstrap,responsive-design
Using bootstrap 3 with mvc5. I have a row of 5 fieldsets with radio groups. I need the fieldsets to be the same height, despite the different number of radio buttons in each group. If I set a height, the radio buttons overflow the fieldset when I go to small...

Img inside Flexbox responsitivity issue

html,css,responsive-design,flexbox
I have fragment of code with flex div, and an img inside it: html, body { height: 100%; margin: 0; } .container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: black; } .item { max-height: 100%; max-width: 100%; } <div class="container"> <img src="http://i.stack.imgur.com/aHBI2.png" class="item"> </div> On...

Responsive Websites - Is important or not for increase your business?

web-services,responsive-design
I want to know information about web designs.So,Can you tell me the difference between responsive web design and adaptive web designs?

How to get from three div's in one div to two div's next to each other on a row?

html,css,responsive-design
My problem is that i have three div's in one div. Above and beneath. When I'm scaling i want to get all the div's next to each other. As two div's on a row. My problem is here.https://jsfiddle.net/nsjrqjw9/ Has anyone an idea how to get two div's next to each...

How to make a jquery datatable use bootstrap table-responsive class?

twitter-bootstrap-3,responsive-design,jquery-datatables
I have jquery datatable, and I know there is a "responsive" plugin to it, but I dont like the behavior as much as the bootstrap table-responsive class. I should be able to just wrap my jquery datatable in a div with this class, but that doesn't seem to work for...

CSS - possible to create a class which doesn't allow any style to be over-ridden?

css,responsive-design
This is my class: .center-block-xs { // this style is given to an image. I want the image to keep it's // original CSS (whatever the default display and margin is for an image) unless // the screen size fits within the media query below. } @media(max-width:767px){ .center-block-xs { display:...

Why don't elements display inline-block again after a resize down and up in Chrome?

html,css,google-chrome,responsive-design,media-queries
I'm trying to prove a wireframe can work responsively, whereby list items 1-4 display:block on mobile, and on desktop 1,3,5 display inline next to each other. I've encountered a weird bug only in Chrome, whereby the elements 1,3,5 don't re-render inline after a resize down to the small breakpoint and...

Make items to stretch inside the container with same gap

html,css,responsive-design
I have four items with same width. I need them to be stretched inside the fluid container. Whenever I resize the window, the gap between each item should adjust in such a way that the items are still stretching inside the container. Here is the image of what I want....

Displaying table columns below of each other for small displays (responsive layout)

html,css,table,responsive-design
I have a table with two columns: ------------- | A | B | ------------- I the browser width is too small for this layout, it should switch to this layout: ------------- | A | ------------- | B | ------------- I got this to work with fixed column width and "float:left":...

How to position heading (h1) placed on a background image and centered according to it outside of its container

css,html5,css3,responsive-design,css-position
In a desktop version I have a background image and h1. H1 is centered according to the image and below I have some content. I've created codepen to visually describe (I used color placeholder instead of an image) - what I have <div class="container"> <h1>Lorem ipsum dolor sit amet.</h1> </div>...

Change media query using Javascript

javascript,css,responsive-design,media-queries
I want to set media queries manually. I have some JavaScript algorithm that tells me what to choose, suppose it is IsMediaA(). @media A { display: block; } @media B { display: inline-block; } Is it possible to change used media query depending on IsMediaA() value?...

Different Stylesheets for Differently Sized Browser Windows

css,responsive-design
I've seen this question floating around, and have seen many good answers but some don't work for me as they don't achieve what I really want, and the one I've found that does, just isn't working for a hopefully-soon-to-be-discovered reason. So, As the title suggests I want to load different...

css. How to write (code) css for different window widths?

css,responsive-design
Want to know correct (the best) way how to write (code) css for different window widths. Here is live example https://jsfiddle.net/q0ony7Lb/16/ For example, have left, right sidebars and main content (#middle). <div id="left">Content in left div<br/></div> <div id="middle">Content in middle div<br/></div> <div id="right">Content in right div<br/></div> If widow width is...

jQuery show a hidden DIV based on CSS element and slideToggle() state property

jquery,html,css,responsive-design,media-queries
I need some support into finishing a jQuery function I am struggling with for quite some time. I have an HTML content in a div with classes mnu2 mob_hide. This content should be always visible for page width more than 500px and hidden if the width is less that 500px....

From developer to designer [closed]

twitter-bootstrap,responsive-design,frontend,web-frontend
Well, this is a really common and "wide" question. I'm a web developer and I have experience in solving server side problems. How can I start to learn Front-End world? I need to become as soon as possible a "Bootstrap-aware" developer!

'I am not a Robot' reCAPTCHA responsive

responsive-design,recaptcha
I'm having trouble making the 'I am not a robot' reCAPTCHA responsive. Making the widths 100% just seems to break it. I have found nothing about responsiveness with the newer better version of the reCAPTCHA plugin with the simple tick box. is there a reason for this or should it...

Increase fonts for mobile devices with Zurb Foundation

css,mobile,fonts,responsive-design,zurb-foundation-5
I've created a clean new web project with Zurb Foundation 5. On desktop and laptop it looks great. I use rem units for font sizes. On small devices the layout is responsive but the font is much smaller - I guess because of higher pixel density. The solutions (this for...

Shape with a slanted side (responsive)

html,css,css3,responsive-design,css-shapes
I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain straight. I tried using the border method (code is given below) but the dimensions of my shape are dynamic and...

Ability to rollback a menu in CSS only

css,css3,responsive-design
I found a responsive, minimalistic menu written in css only. When the screen is small, magic happens : the menu is able to drop down and rollback with no javascript, when the user clicks on the "hamburger" icon. Transition is made probably thanks to that extract : #nav:checked ~ nav...

Horizontally Align Tworesponsive Images

html,css,image,responsive-design
Still learning responsive web design and ran into a snag. Is there a way I can make these two linked images horizontally aligned instead of being on top of each other while still maintaining responsiveness? Basically I need these images to be horizontally on the same line while still being...

DIVs with background-size

html,css,responsive-design,background-image,background-size
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px) So I wanted to make a couple stacked divs, each with a background that gets resized via background-size....

Bootstrap 3 grid breaking with responsive images of not the same height

twitter-bootstrap,twitter-bootstrap-3,responsive-design
I'm trying to make a simple grid with responsive images in it. My images are movie covers and some are a few pixels less taller than others which seems to destroy my grid right now. You can see the problem on the fiddle here: http://jsfiddle.net/tbergeron/qzt8enaz/7/ Here's a short sample (please...

Keep images centered when resizing

css,css3,responsive-design
I want to keep the image centered when I resize the browser. Check out my fiddle I'm using the following code but everytime I resize the browser, my image does not keep center (x/y). Also it should work with IE9 and up. Any help would be appreciated! .container { height:...

Angular scroll directive

angularjs,angularjs-directive,responsive-design,angular-ng-class
I try to create a directive with two params, class and pageYOffset. I would like to check the scrolling position of my element and add a class name if the pageYOffset is bigger than the number in the attr. Somehow I cant't trigger the class changes. HTML <div scroll offset="1500"...

CSS way of looping a background image with cover or contain sizing

css,css3,responsive-design,css-animations
Say you are trying to animate a tilable background like this: .container { width: 160px; height: 91px; } .bg { width: 100%; height: 100%; background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center; background-size: contain; -webkit-animation: displace 2s linear infinite; animation: displace 2s linear infinite; } @-webkit-keyframes displace { from { background-position: 0 center;...

Responsive Layout inc HTML5 video

html5,css3,responsive-design
I'm struggling with a responsive layout... In the image above, the red is an HTML5 video & the blue are images. I'm using JavaScript to make the HTML5 video responsive - //vjs.zencdn.net/4.12/video.js But however I lay this out, either Firefox, or Chrome & IE have a 1px line below images...

Why does my viewport look different when I deploy to heroku?

html5,mobile,heroku,responsive-design,viewport
I have a simple web app that I am deploying to heroku. In my html, I am have the meta information about the viewport: <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>Notify</title> <link rel="stylesheet" type="text/css" href="./app.css"> <link rel="stylesheet" type="text/css" href="./bootstrap.css"> </head> Here is my server code: var express = require('express');...

Standard resolution sizes to optimize for

css3,responsive-design,media-queries
I'm working on one of my first responsive websites and I'm trying to figure out for what kind of resolutions to optimize for. Is there any standard or what? What are your practices? It would be nice to know....

How to move Right aside div above Left content div

css,css3,responsive-design,resize
I have two divs, a main left content and a right aside. With a media query (as screen gets smaller), I want the left content div to move down and allow the right aside div to move above it. Here's what I currently have... HTML: <div id="content">content</div> <div id="aside">aside</div> CSS:...

Responsive Design for mobiles with high resolution & small screen

css,responsive-design
Hello guys I am using @media only screen and (max-width: 320px) (320 is not the only one is use) within CSS to assign different styles for mobile devices. However I find it troublesome when I actually check same website on the phone. While previewing it in Firefox on my desktop...

Responsive table with equal width and height TDs

html,css,css3,responsive-design
How can I create a responsive HTML table that each cell/TD has equal width and height? So when I resize the browser window or resize the table's container, the table will resize, but each cell will have equal height and width. Foundation doesn't take care of that. When I initialize...

Responsive css always applying landscape

html,css3,responsive-design,screen-orientation
I'm trying to understand why my css is always applying the h1 font size in landscape instead of portrait when I am in portrait (I'm a noob in responsive design). Anyone have an idea of what I'm doing wrong ? Thank you ! Guillaume **** edited new version: now working....

bootstrap responsive navigation. Toggle button position

mobile,responsive-design,navigation,bootstrap
I'm working on a responsive template and I can not sort this out!!! So.... My header and navigation HAS TO LOOk like this in mobile screen: But I'm struggling because the natural behave of the navigation, as you see in desktop size: The navigation is the grey bar, so when...

Responsive HTML not reacting as expected in different browsers [closed]

html,css,browser,responsive-design
So I am making a website but some weird thing is happening. Like, you can see it happen by yourself, it's pretty staight forward; try opening this link into Chrome and Firefox (for example). Chrome reacting just fine, and not Firefox. As the two files are pretty long, I pasted...

How container width is calculated in bootstrap for different devices

css,twitter-bootstrap,responsive-design
I am just starting with Bootstrap and going through docs. Right now, seems very confusing and have some queries as follows: In the Grid Options table, why the container width is always less than device width, why not equal to device width for e.g.Small devices Tablets (≥768px). How the width...

HTML5 & CSS3 responsive website design margin issue

html5,css3,responsive-design,margin,padding
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just...

How to make Chart JS responsive?

twitter-bootstrap-3,responsive-design,chart.js
I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?

How to create a 3 column (ul, li) header that (responsive) collapse one below another?

html,css,css3,responsive-design
The fiddle is HERE I have a very odd HTML structure old website. Client is asking me to make it responsive. I need this website need to behave responsive from the breaking point 768px. I've changed the HTML structure bit as follow: <div id="tm_container"> <div id="backtotop"></div> <div class="tm_header_file"> <div class="social_bar">...

Making three-column HTML responsive

html,css,responsive-design
My page width is 960px and I have 3 divs on it in a horizontal manner that collectively take 100% of the width. When the page width is decreased, I want the divs to be arranged in a vertical manner. How can I do it in CSS ?? ...

AngularJS material mobile layout not responsive

angularjs,responsive-design,flexbox,angular-material
I am trying to make a responsive website and the issue that I am having is the mobile version just looks like a super tiny version of the desktop. <body ng-controller="body" > <div layout="column"> <div flex> I'm above on mobile, and to the left on larger devices. </div> <div flex>...

Responsive elements on Ipad

css,ipad,responsive-design
I have a problem with the responsiveness of 4 elements on a site i'm working on (www.elephantdesign.nl). The pie chart elements scales perfectly on my desktop internet browser. But for some reason the elements overlap on the IPAD 2. I have used this CSS: @media only screen and (min-device-width :...

How do I test a responsive website on a Retina Macbook?

css,html5,responsive-design,retina
So I have created my responsive website. When I test it on a PC and resize the browser to check the smaller screen sizes work correctly, all is fine. When I test on my primary machine, which is a MacBook Pro Retina, if I resize the browser down to smaller...

Scale Only One Image Down in Mobile View

css,html5,mobile,responsive-design
I don't have very much html/css knowledge. I have the whole site golden for mobile/tablet view. I am running in to a problem with the navigation bar. When the screen is scaled down, the logo takes up the whole navigation bar and you can't see the links. All the other...

WooRank Touchscreen Readiness Failing

responsive-design,seo,responsiveness
I'm currently using the WooRank website to improve my sites SEO> However, it keeps failing on "Touchscreen Readiness". It states my buttons should be 40px in height/width which they appear to be.. but it's failing. Any advice? URL: http://www.answer-hut.com...

CSS media-query to squeeze image into container

css,css3,responsive-design,media-queries
I am forced to work with a table-based layout and need to make it responsive. Am struggling with images: when the image-width exceeds the screen-width, it should shrink to fit on the screen. In several articels here I found max-width being recommended, but somehow I'm not getting it to work....

Control BX Slider from outside of function

javascript,jquery,function,responsive-design,bxslider
I have multiple BX Sliders on a page. I don't want to have to give each one an explicit ID in the JavaScript (as the documentation suggests) as there could be an unknown number of sliders. Each carousel has an ID in the markup. The slider also changes configuration at...

How to fix responsive columns on this website?

html,css,wordpress,responsive-design
I'm trying to figure out a way to make this work using CSS. I use wordpress and a theme so I can't really change much of the markup so I'm trying to solve this problem with CSS first. I'm building a site with 3 columns article. It's working fine on...

How to “left-center” align wrapped inline-blocks within a div

html,css,responsive-design,alignment
I've seen some similar questions to this, but most seem to lack images that thoroughly display what the problem is. I'm trying to get the following responsive layout to work when narrow. It looks like this right now: Here's what I want it to look like. Note that the left...

How to achieve this desktop/mobile layout with Bootstrap 3?

css,twitter-bootstrap,twitter-bootstrap-3,responsive-design
I have a design I'm trying to implement, and I'm stuck on how to do it properly with Bootstrap 3. I'm not very experienced with Bootstrap and I'm sure I'm missing something which will make the concepts fall into place. Three DIVs with background images to be seen on desktop...

Table like layout in responsive design cross browser

html,css,html5,css3,responsive-design
In a webpage i have following markup for my layout <div class="parent"> <div class="left-content"></div> <div class="right-content"></div> </div> and the styles for the given markup are: .parent{ display:table; width:100%; } .parent > .left-content{ width:auto; } .parent > .right-content{ width:320px; } How do I make the "right-content" occupy 320px of available width...

How to place a background image in a
block and behave as “responsive”

css,responsive-design,background-image
I have a background-image in a block as seen in the page link below. I am trying to display the image as follows: I want the image to consume more of the page background (irrespective of how much content is in the div block I need the image to extend...

Bootstrap: Collapse nav at 768 px of screen size

twitter-bootstrap,responsive-design
I'm using bootstrap but sadly the nav items collapse only for smartphones, how can I make it collapse for tablets in portrait mode? (768px) My nav item: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse...

No matter what, section won't become 100% browser height

html,css,responsive-design,viewport
Here's the website: jasontheodore.com I am just trying to place some heading text directly in the center of a div that takes up 100% of the browser height. The code is as follows: HTML: <section id="landing-page"> <div id="logo"> <h5>Jason Theodore Bain</h5> <h4>graphic designer . marketer</h4> </div> </section> CSS: html, body...

Single page app viewport mobile using Foundation

javascript,css,mobile,responsive-design,zurb-foundation
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling. This...

Responsive Email - Conditional Statements causing problems in Outlook

email,responsive-design,outlook,html-email
I am building a template for responsive emails and in one section I have two blocks of text which we want to stack in smaller devices. Strangely, the Outlook conditional statements are causing extra padding around them in Outlook only. Thy work great with cells that contain images etc but...

Why doesn't the page's width decrease according to viewport?

html,css,responsive-design
I'm trying to accomodate a really really old website to mobile standards and for some reason it doesn't get a width of 320 or whatever pixel width when i activate the responsive view in chrome dev tools. The result of this makes the pixels small while still maintaining the original...

FlotJS tooltip messing with the responsiveness?

javascript,html,css,responsive-design,flot
I am working on an application where I am using FlotJS charting library to plot graphs and I have turned on the tooltips so that users can hover over points and can tell the content of each point on a particular date. Like in this interactive graph example by flot,...

Responsive sized swfobject?

flash,responsive-design,bootstrap,swfobject
I have embedded this interactive poster ( http://www.mikesmithdesign.co.uk/images/posterforscreen.swf ) into an html page but am having trouble setting the size of it. I am working with bootstrap and want the content to be responsive but at the moment it comes up really small sits in the middle of the column...

Create responsive web page with CSS (need help about page width)

html,css,responsive-design,viewport
I am trying to create responsive web-page for four sizes of screen (320px, 640px, 980px and 1024px). So when I play around with site size all seems fine, all responsive, but when I make size larger than 1024px, I want to stop any resizing actions and make page look like...

Unable to pass responsive css to page which calls in Iframe tag in other responsive page

html,css,iframe,responsive-design
I have designed a responsive page that includes a pagination block through an iframe tag but the responsive CSS is not applying for the iframe block and its content. I have passed the CSS from main page to the iframe page, but it not applying responsive CSS....

Any way to add a breakpoint in Bootstrap?

html,css,twitter-bootstrap,responsive-design
Is there any way to add a 5th breakpont to 4 that already exist? Unfortunaetly, 4 is not enough for a project we currenty work on. the idea was to create a new break point screen-hd, which is more than 1400px. Is there easy way to do it?

How do you force a website to be in landscape mode when viewed on a mobile device?

css,asp.net-mvc,mobile,responsive-design,media-queries
I've seen a lot of questions about this, but no definitive answer on how to do this in a Razor/MVC site where the mobile site is determined using the DefaultDisplayMode class. Also, a lot of the answers are just code snippets without details on where the code goes (is it...