Struggling to achieve a fluid design with bootstrap framework

Check out my website live at the following URL, but please note that I am using the latest version of bootstrap. All CSS styles are included in 'master.css'. The issue I am facing is that elements like this box or any other (as you will see when filling out the form later) are not responsive. I even tested it on a mobile device and still no luck! Can you help me figure out what I might be missing?

In my files, I have only included bootstrap.min.css along with some custom styles featured at the end in 'master.css'

htmlcsstwitter-bootstrapresponsive-design

Answer №1

You modified the width of .col-min and also of 

.form-area-inner, .form-planner-inner
as a result, the flexible nature of bootstrap's responsiveness is being overridden by these fixed widths.

To regain responsiveness, consider removing those fixed widths. If necessary, you can implement media queries to maintain the fixed widths for specific layout sizes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Outer div encapsulating inner div within its boundaries

I am looking for a solution where the inner div stays fully contained within the outer div, without overflowing and overlapping with the padding of the outer div. Here is a code sample that demonstrates the issue .inner { /* Overflow */ overflow-wra ...

javascripthtmlcss

Incorporating a touch of dark opacity into an image

Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg The background image I used is this one: https://i.sstatic.net/dIhLt.png I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdi ...

htmlcssfrontend

how can the class hide be removed when hovering over each link

How can I remove the class hide from a div with the class popover when hovering over each link? I have tried implementing the code below, but it doesn't seem to be working as expected. $(document).ready(function() { $(".myPopover").each(function( ...

jqueryhtmlcss

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

Struggling to implement a vertical scroll bar within a nested div element

Struggling to make a scroll bar appear in the box-content div, even after adding 'overflow-y:auto'. My specific requirements are: The entire layout should adjust according to the browser height. This is why I've set #wrap { ... height: 50 ...

cssoverflow

css three columns evenly spaced in the center

I am currently using bootstrap, CSS, and HTML to design a responsive webpage with three columns in a row. The layout consists of a textbox on the left, a button in the center, and a table on the right. So far, I have made three separate attempts at achiev ...

javascripthtmlcssbootstrap-4

Is my utilization of Flexbox and media queries incorrect?

Currently, I am practicing flexbox and breakpoints in material UI using React.js and I am attempting to achieve a layout similar to this: https://i.sstatic.net/vAkdo.png My goal is to have the product images and type displayed in columns, while the produc ...

cssreactjsflexbox

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form. The file named search.ejs looks like this: $(document).ready(function(){ var userInput; $("#submit-button-i ...

javascripthtmlnode.jsexpress

Redirection with Mod_Rewrite

I'm currently facing an issue with mod_rewrite on my hosting platform. Everything was working smoothly until I decided to reorganize my directories. As a result, all the pages that were previously indexed by Google now have an incorrect extension. I o ...

htmlmod-rewritehttp-redirecthttp-status-code-301

Adjustable size for web page elements

I am currently designing a web page using a basic template structure. The layout includes a header, top navigation bar, side navigation panel, main content area, and footer. While working on this project, I created a similar design in a jsfiddle demo. Ho ...

javascriptjqueryhtml

What is preventing me from adjusting the height of this DIV element?

I'm completely stumped by what's happening here. I've been trying to increase the height of a DIV element with an id of #titleStrip, but it just won't budge. It's beyond frustrating. I thought I knew my way around this kind of thin ...

htmlcss

What is the best way to validate adjusted tags within the html editor of Visual Studio 2012?

The html editor in Visual Studio 2012 keeps giving me warnings for tag names that are not recognized in the detected or configured html schema. Since I am using AngularJs by Google, this is quite inconvenient as it relies on the ability to enter custom ta ...

htmlvisual-studio-2012

I am looking to create a layout with two images placed next to each other using bootstrap, regardless of their dimensions. However, the images do not automatically adjust themselves within

<div class="container" style="background-color: aqua;"> <div class="row"> <div class="col-md-6"> <img src="nature.jpeg" class="img-responsive"> </div> <div class="col-md-6"> ...

htmlcssangularbootstrap-4

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

javascripthtmlcss

Javascript code requires server to have default text field values

Based on the choice made by a user, a text field box will either remain concealed or revealed: $("#aForm").on("change", function() { if ($(this).val() == "a") $("#textField").hide(); else $("#textField").show(); }); The issue arises when the ...

javascriptjqueryhtml

Hovering over the image causes it to flicker and it remains the same

I have an image column within a grid, where the images are displayed at 25px x 25px to fit nicely in each row. I've added a hover effect to the images so that when you hover over them, they shift left (which is working) and then expand for better vis ...

css

Issue with alignment in Bootstrap5 - ms-auto not functioning correctly in row and column components

My goal is to make the button move to the right side of the screen within the row element. I initially placed the text and button in separate column elements, and then attempted to use ms-auto on the second column element to align it to the right, but for ...

htmlbootstrap-5

Streaming videos using Flask with a custom template

After successfully implementing the DWA path planning algorithm in C with Python bindings, I have decided to create a web application demo. The concept involves a "robot" following the mouse using DWA, while allowing users to draw walls for objects. My ini ...

javascriptpythonhtmlflask

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

javascriptjqueryhtmlyoutube

Combining CSS Modules with Ant Design in ReactJs results in compatibility issues

Struggling to implement CSS Modules for styling in my ReactJs project, I followed the ant design documentation found here: . Unfortunately, it's not working as expected when trying to override the component styles of an ant Button. Below is a snippet ...

cssreactjswebpackcss-modulesant-design-pro