FAQ Database Discussion Community


making stackable two columns in WordPress

css,wordpress,responsive-design,wordpress-theming,responsiveness
I'm working with a theme that is supposed to be responsive but when the two column shortcode is used and a page is viewed on smaller browsers or mobiles, the columns shrink to fit the browsers width side by side instead of stacking. It looks awful on smartphones, I am...

How to make table td take the width of its content

css,html5,css3,table,responsiveness
Demo: http://jsfiddle.net/zvmcyp4w/ .wide { width: 400px; background: lightblue; } .narrow { width: 200px; background: lightpink; } .table-responsive { max-width: 100%; overflow-x: auto; } table { border: 1px solid black; border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } <div class="wide"> <div class="table-responsive"> <table> <tr> <td>Many words</> <td>word</td>...

Issue with bootstrap responsiveness - overlapping of image and text

html,css,twitter-bootstrap,user-interface,responsiveness
When changing the size of the internet browser, everything seems to be responsive until get to a certain window size. When expanding my window, the container size of my site will jump from (944px X 240px) to (463.5px x 289px). Please help me figure out how to solve the overlapping...

Bootstrap 3 Navbar Not Responsive

html,twitter-bootstrap,responsive-design,nav,responsiveness
I've been testing my bootstrap site on various devices to ensure it's responsive. I've got everything resizing correctly for different display sizes except the navbar. On my browser, when I resize the window horizontally it seems to respond, collapsing the menu as expected, but on mobile devices I still see...

Bootstrap 3 Panels in responsive view

css,twitter-bootstrap,panel,responsiveness
I am using four panels in a layout, each full width. They stack nicely in sm and xs views as they should. I've set the panels to have no styling when in md and lg view sizes which works as it should. How would I get them to display collapsed...

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...

Why the slider image is not responsive?

css,slider,responsiveness
The problem seems to come from the ul.gallery with that width of 20000em. Even if the rest of the divs are resizing, the images are not. here a live test; (edit: removed link) Any help please? #container div.school { background: white; color: #333333; float: left; position: relative; overflow: hidden; max-width:...

Background Image Is Not Responsive AFTER jQuery Sets CSS

jquery,background-image,responsiveness
I have a div element that will contain a different background image based on the size of the browser screen. Here's an example of the CSS that will do the responsive work: div { background-image: url(a.jpg); } @media screen and (min-width: 700px) { div { background-image: url(b.jpg); } } The...

how to disable responsive dropdown navbar in bootstrap 3.0

twitter-bootstrap,navbar,responsiveness
I want to disable responsive dropdown of navbar in bootstrap and like desktop screen show me. this is my code... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <nav...

Div tag respond (height) to image inside it

html,css,responsive-design,responsiveness
I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width)...

Width of list item isn't adjusting past maximum pixel declaration

javascript,responsiveness
I have a small script that detects window width and adjusts sub navigation list items if the screen is between 600px and 1200px. The script works within constraints, however when the browser resizes past 1200px or below 600px, the width declaration stays applied to each relevant list item. However, once...

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...