Issue with Media Queries for adjusting width not functioning correctly

I'm currently working on a JavaScript calculator project and I'm having trouble making it responsive. Specifically, when the screen size decreases, the buttons in the calculator are not displaying properly, especially the operator buttons. I would like to increase the width of the .calculator element slightly when the screen size is smaller so that all the buttons are visible.
Here's the CodePen link where I've been working on this: https://codepen.io/tanjimanim/pen/jOwoYrV?editors=0110

Below is the media query code I've written:

@media screen and (min-device-width: 320px) and (max-device-width: 630px) {
  .calculator {
    width: 60%;
  }
}
htmlcss

Answer №1

Here is a snippet of CSS code to use:

@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 60%; 
  }
  button
  {
    padding:16px 0px;
  }
}

The device-width property is no longer supported. To display all the operator buttons on mobile devices without padding, remove left and right padding from the button selector.

Take a look at this screenshot for reference

Answer №2

When it comes to responsive design, the min-width property kicks in when the range is beyond a specified value in pixels, while the max-width property takes effect within that specified range.

The issue may be stemming from setting width:60% for both device sizes and applying the max-width:45px property to the .calculator class. To address this, consider modifying the media query to adjust the width of your calculator based on the display size. You might want to remove the max-width property entirely if you wish the calculator to expand to the full width of the screen.

You could try the following approach:

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

This snippet will ensure that the calculator's width adjusts appropriately when the display size falls within the 320px range. Feel free to tweak the width values to suit your design needs!

Answer №3

The property for device width is no longer supported, so it is recommended to use min-width instead. For more details, you can refer to the documentation on MDN

To make this change, modify the following:

  • min-device-width should be changed to min-width
  • max-device-width should be changed to max-width

@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 60%;
  }
}

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

creating nested columns within a parent column using flexbox techniques

Struggling with column height issues in Bootstrap 3? Consider using flexboxes for a simpler solution. Check out the design image I created using Bootstrap 3: https://i.sstatic.net/PVCKm.png Can this design be replicated with flexboxes? I have successfull ...

htmlcssflexbox

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: https://i.sstatic.net/oRR5N.png Despite my efforts, the browser continues to display it like this: https: ...

htmlcss

Do Bootstrap 3 and Bootstrap 4 - alpha versions maintain backward compatibility with each other at present?

Is backward compatibility maintained between Bootstrap 3 and the alpha version of Bootstrap 4? I am attempting to replace Bootstrap 3 with the new alpha version, but I am experiencing broken styles. Is this a common issue or am I missing something in my a ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

htmlcssfontsresponsive-designfont-size

jQuery: Function is not running as expected

I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...

javascriptjqueryhtmlcss

Why are the icon pictures not displaying in Angular's mat-icon-button?

Recently, I stumbled upon a snippet of code in an Angular project that caught my eye. Naturally, I decided to incorporate it into my own program: <div style="text-align:center"> <a mat-icon-button class="btn-google-plus" href="http://google.com ...

htmlangularbuttoniconsangular-material2

Issues encountered with the functionality of face-api and tensorflow.js within the browser

I've been trying to execute this example in the browser Check out the example here Specifically looking at this code snippet <!DOCTYPE html> <html> ... (Contents of the code snippet) ... </body> </html> Unfortunately, I&apos ...

javascripthtmltensorflow.jsface-api

I'm struggling to grasp the concept of the Bootstrap exercise

Being a new student can be challenging, especially when faced with a teacher who struggles to explain concepts clearly. Despite having only 4 weeks of school, I find myself unable to complete the exercises as I lack the necessary guidance. Could someone k ...

htmlcssbootstrap-4

Utilizing jQuery to generate dynamic nested divs within the ul li tags

I am looking to dynamically generate nested divs within a ul li. The goal is to create the following structure programmatically: <ul> <li> <div class="videoThumbnail"> <img src="./img6.jpg" /> &l ...

javascriptjqueryhtmlcss

Control the value dynamically with Powerange using JavaScript

I have incorporated the Powerange library into my form for creating iOS style range bars. This javascript library offers a variety of options provided by the author. Is there a method to programmatically move the slider to a specific value using JavaScrip ...

javascriptjqueryhtml

Arrangement of divs on a stretched background

Seeking assistance to code a layout using div layers that resembles the design in this sample: The concept involves dividing the background into 4 distinct sections with content placed centrally. The upper part will feature a main banner image over pink a ...

htmlcss

positioning two out of three items in a navigation menu to the right and the remaining one to the left

I am looking to design a navigation bar that spans the full width of the screen, with the logo on the left side serving as a link back to the home page. Additionally, I want to include elements for register/login and cart. The background color should cove ...

csshtml

I Tried Adding Up All the Numbers, but It Doesn't Seem to Work for Every Dynamic Total Field

In my project, I am utilizing Laravel 5.7 and VueJs 2.5.*. The issue I am facing is that when I input values, the Total field calculates correctly. However, when I dynamically add rows for items, the calculation only works for the first row and not for the ...

javascripthtmllaravelvue.jslaravel-5.7

String constant without an ending

My Description has a single quote character('). How can I make sure it doesn't break the code? <a href='javascript:select("<%= pageBean.replace(list.getColumn(0), "'", "'") %>", "<%= pageBean.replace(list.getColumn(1), ...

javajavascripthtmljsp

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

Choose all the checkboxes and set the value of the selected checkbox to 'on' using jQuery

Here is my JSFiddle demonstration featuring a scenario where there are 3 checkboxes. My goal is to assign the value "on" to the selected checkbox, while the unchecked ones should have a value of "off". Initially, I set all checkboxes to have a default va ...

javascriptjqueryhtmlcheckbox

Bug on a Safari browser when using a dotted border on a table

Issue in Safari and Chrome browsers: CSS: TABLE { width: 100%; clear: both; border: 0px; border-collapse: collapse; } TABLE TH, TABLE TD { padding: 10px; text-align: center; border: 1px dotted #898989; } ...

htmlcsssafari

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

javascripthtmlseleniumselenium-webdriver