Is it possible to make a div's width 100% until a certain point, and then change it to 30% beyond that breakpoint?

I am trying to work with a div element

<body style="width: 100vw; height: 100vh">
  <div id="containerDiv">
    <div id="canvasDiv" />
  </div>
</body>

My goal is to adjust the width of canvasDiv based on the screen size. I want it to be 30% of the width of containerDiv on larger screens, and 100% on smaller screens.

I'm hoping to achieve this using Bootstrap for simplicity. I have made some progress by including the following code:

<body style="width: 100vw; height: 100vh">
  <div id="containerDiv" style="width: 100%; height: 100%">
    <div id="canvasDiv" class="container-md m-md-0" />
  </div>
</body>

Currently, the width of canvasDiv changes at the Bootstrap's md breakpoint. Is there a way to override this behavior and set it to 30% instead?

I understand that I may have multiple questions here. Any guidance or redirection to relevant resources would be greatly appreciated to help me gain a better understanding.

htmlcssbootstrap-4bootstrap-5

Answer №1

using css styling:

         @media screen and (min-width: 768px) {
             #canvasDiv {
                 width: 30vw;
             }
         }

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

Checkboxes within div elements are unresponsive to clicks

As a novice, I am facing a simple issue. When I place an input checkbox inside the #container div, it functions correctly. However, when I try to put them within the #container div > #section div, they fail to work. *, html, body { box-sizing: b ...

htmlcss

Bringing in a JavaScript function from a local file into a Node.js

I've been struggling with this issue for a while now and I think it's because of my misunderstanding of how files are linked in node.js. My file structure looks like this: ./main_test.html ./js_test.js ./node_test.js The main_test.html file is ...

javascriptjqueryhtmlnode.js

Guide to displaying a redirect from a CodeIgniter controller with an ID in PHP

I only have one button, but it needs to trigger two functions. I am trying to save data and redirect to a view with an ID. However, I keep encountering an error in the syntax. Message: Too few arguments to function c_transaksi::tambah_shrinkage(), 0 passed ...

phphtmlajaxcodeigniter

The tag that is mandatory is not functioning properly in the Bootstrap form

I am currently working on integrating a Bootstrap form into my Flask website, and I am facing an issue with making certain fields mandatory before submission. I have tried using the "required" attribute in the input tags, but for some reason, it is not wor ...

htmlflaskbootstrap-5

Showing the outcome of a PHP function within a div container

While working on my WordPress site, I've implemented user registration and login functionality. However, I'm not a fan of the default 'admin bar' and would rather create a custom navigation bar. I am looking for a way to dynamically loa ...

javascriptphphtmljsonwordpress

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

javascriptjqueryhtmlcss

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

javascripthtmlcsscss-transitions

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

Reload a forum in a div without refreshing the entire page

I'm interested in finding out if it's possible for a div to reload similar to how a window does. I have a forum set up, but I don't want the entire page to reload after each form submission. Instead, I'm wondering if only the elements w ...

phphtmlajaxdatabase

Loop through the elements retrieved by the `getElementsByName` method in

My goal is to access each node by elementName using the following JavaScript code: function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att ...

javascriptjqueryhtmlxmlxslt

Click to dynamically change the input number variable

I'm in the process of creating a special calculator, where you input the number of years into a field, hit submit, and see different results displayed below without the page reloading. All my calculations are working properly at the moment. However, ...

javascriptjqueryhtmlfunction

creating unique icons in primefaces

I attempted to create a new icon for my p:commandButton, but unfortunately, I was unsuccessful. I followed the method outlined in this helpful link: PrimeFaces: how can I make use of customized icons? However, this approach did not work for me. Below i ...

cssjsfprimefaces

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

javascripthtmlcss

In an AJAX response, the button will be disabled if any checkboxes are left unchecked, regardless of their group

This text has been inspired by a thread on Stack Overflow regarding disabling a button based on checkbox selection In the original post, the button is disabled unless at least one checkbox is checked. In my scenario, I have two sets of checkboxes: <d ...

javascriptjqueryhtmlajaxcheckbox

Issues with Bootstrap 4 (possibly JQuery) - mobile menu navigation items are unresponsive

I've encountered an issue with my Bootstrap4 navbar on mobile screens where the links in the menu don't seem to work. Below is the code I used: <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28"> < ...

javascriptjquerytwitter-bootstrapbootstrap-4

Having trouble replacing scss variables in react-h5-audio-player

I recently integrated react-h5-audio-player into my project and followed the instructions on the README page to customize the styles by updating the SCSS variables that control the colors. However, it appears that my custom styles are not being applied. An ...

javascripthtmlcssreactjssass