What's the best way to make a d3.js visualisation layout responsive?

Assume I have a histogram script that builds a 960 500 svg graphic. How do I make this responsive so on resize the graphic widths and heights are dynamic? <script> var n = 10000, // number of...

how to make responsive website for all devices

I've used Zurb Foundation and Skeleton before so I'm familiar with both but I never had to convert an existing website to a responsive website before. Whats the quickest method to convert my...

Making button go full-width?

I want a button to take up the full width of the column, but having difficulties... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level...

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> ...

css : prevent div width from expanding to available width

How can I prevent div from expanding? I want div with elements not to take 100% of available space and have width that it's children have. I need this for centering parent div horizontally. The...

Is there a free extension for Safari that displays the viewport size

I've got a nice extension for chrome ('Window Resizer') that displays the viewport size, but I don't know how to clear the cache in chrome without using my mouse so I tend to use Safari for...

resize ckeditor for responsive design

I'm trying to use CKEditor on a responsive design, and I cannot get the height to work. The following code with height define works to resize the text area to 100%, which overflows the containing...

How to make modal box responsive?

I have implemented this jQuery-based modal box: http://leanmodal.finelysliced.com.au/. It works perfect, and it is quite easy to use. However, it is not responsive - contrary to the rest of the...

Website elements and font are too small in mobiles

I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some...

Error in jQuery function mixitup()

Trying to put this filter portfolio gallery on my Blogger (blogger.com) How to Build a Filterable Animated Portfolio Layout In Blogger template head I...

How to change side by side divs to stack on mobile?

I am trying to get my 2 divs (which are side by side) to change to stacked divs when viewed on mobile as shown in the fiddle, but I would like "two to be on top and "one" to be second. Here is the...

is there some way to debug my emails layout on dev tool

I'm building several email tamplate (DEM), using table, css in line, ecc. To test it I'm usign litmus.com I'm wondering if there is any tools that let me debug email template in any browser using...

how to align right hand side image on top of text on mobile screen

I have two rows on a webpage: on the first row, the image is on left side and text on right side. For the second row, it's vice versa. When I see the page on a mobile device, the image which is on...

Select control is missing its arrow icon on a form using Bootstrap (with Firefox browser)

I have a select control on a form using Bootstrap (with Firefox browser), but it is missing its arrow icon on the right: Here is the relevant HTML I used: <div class="container-fluid"> <form...

Button group not wrapping when too long

I have a very long button group : https://jsfiddle.net/cyu4bvak/ <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox"...

Make an Iframe responsive in height

I have a type of "store-locator" on https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ Due to demand, I want to put this in an iFrame so other websites can display this form on...

How to center a div with css-grids?

You can see my project here: https://jsfiddle.net/alphatier/byfvpq8h/2/ .i { grid-area: i; } .t { grid-area: t; margin: auto; } .grid { display: grid; grid-gap: 15px; } .box { ...

Search bar below search button - on click

I am developing webpages for angular 4 application using bootstrap 3. Trying to add a search button (top right/top left) which will expand in next row on click. Refer top right corner search...

What is the antd equivalent of Bootstrap 4 spacing utilities?

In Bootstrap 4, you can use these utilities: Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. The classes are named...

Blogger Blog Archive Displays on Half of the Page on Mobile Screens

This Blogger blog archive search results like https://www.neuroscientia.com/2018/08/ only display the posts in half of the page while leaving the other half blank on especially on mobile screen...

How to handle responsive layout in React Native

I'm using the react-native-dimension library for making my UI responsive as follows: const{width,height} = Dimensions.get('window'); and in my style.js file...

Lightbox by Lokesh Dhakar disableScrolling jumps to top of the page

As the title says, I have this problem. The option to disable scrolling simply applies html.lb-disable-scrolling{overflow:hidden;position:fixed;height:100vh;width:100vw;} To the html. Upon...

Responsive table inside Flexbox not working

The responsive Bootstrap table inside my flexbox layout is not working. It seems that the overflow property from the "responsive-table" class having no effect. If I change the outer layout from...

Determine how much of the viewport is covered by element (IntersectionObserver)

I'm using the IntersectionObserver to add and remove classes to elements as they enter the viewport. Instead of saying "when X% of the element is visible - add this class" I would like to say...

Aligning Icon List vertically in Wordpress

new to overflow and website design. I'm having issues aligning an icon list in the center using Wordpress plugin Elementor. Here's the website: https://goldeneagleconstruction.co/ This issue is on...

How to present actual device screen size in Firefox responsive design mode?

Using Firefox Dev Tool window to debug HTML graphics, how do we get the real size of emulated devices? I can't seem to figure this out or find information. I want to be as clear as possible...

How to make a responsive grid, using Ant Design?

I try to follow this documentation, but i can't make this work. I want to make the boxes break into one column for small screens, just like the follow examples. Into Do i have to use css...

Make dropdown to drop up when theres no space at bottom ALPINE JS and TAILWINDCSS

I have a date picker component made with a tailwind and alpine js, I used this as my reference to my date picker. My problem is the mobile responsiveness when I'm on a small device the date picker...

how to place an icon badge on ionic?

how to design a card with notification badge without number with ionic and scss make it as follows Badge without number I have the following scss but it is not responsive <ion-card...

Material UI responsive grid direction

I want the container direction as "row" above md size screen and "column" below md size screen? How can I implement it? <Grid container direction = "row"(in large screens)/direction = "column"(in...