It appears that the media queries are not functioning as expected

I'm having trouble getting a media query to work on my webpage

As a beginner, I'm still trying to understand the ins and outs of media queries

Below is the code snippet for the media query:

@media screen (max-width:320px){h1{font-size:0.75em;}h1{font- 
size:0.8em;}p{font-size:0.8em;}figcaption{font-size:0.8em;}.img-style{max- 
width:45px;max-height:45px;}#profile-link{max-width:55px;max- 
height:55px;}#navbar{text-align:center;}}

For reference, here's the link to the Codepen where you can view the code in action: https://codepen.io/don0ts/pen/JByjqO

htmlcssgridmedia

Answer №1

Consider writing in this format: "@media only screen and" as opposed to "@media screen"

Answer №2

Feel free to utilize this code snippet - simply remove "screen" from the "@media screen". 

    @media (max-width:320px){
      h1{
        font-size:0.75em;
      }
      h1{
        font-size:0.8em;
      }
      p{
        font-size:0.8em;
      }
      figcaption{
        font-size:0.8em;
      }
      .img-style{
        max-width:45px;max-height:45px;
      }
      #profile-link{
        max-width:55px;max-height:55px;
      }
      #navbar{
        text-align:center;
      }
  }

Alternatively, you have the option to switch to "@media only screen and (max-width:320px)".

Answer №3

Don't forget to include the and word.

@media screen 
and (max-width: 320px) {

  //add your styles here

}

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

Tips on creating fixed size wells in Bootstrap

In my current situation, I am looking to set a fixed size for my map within a well. Here is the link to a jsfiddle: https://jsfiddle.net/x4gM4/36/ (please scroll to see what I have attempted). I have already tried the code provided in the jsfiddle. Can ...

javascripthtmlcsstwitter-bootstrap

How can one create custom JavaScript UI controls for a UWP application?

I am currently working on a UWP application and I am looking to incorporate JavaScript HTML5 based UI components. Is there a method to integrate this UI into a UWP application? My UI is completely developed using JavaScript, jQuery, CSS, and HTML5, and I w ...

javascripthtmlvisual-studio-2015uwpwindows-10-universal

css The max-width property appears to be malfunctioning

My parent element has a width of 100px and a position of relative. Inside it, there is an inner element with a position of absolute. I want this inner element to stretch out up to 200px, but for some reason, it's not working. The maximum value it take ...

htmlcss

The ZK Component fails to display within the HTML tag

In my dilemma, I am attempting to showcase a hyperlink component under an HTML tag along with some instructions for click functionality: <zk> <html> <a label="show me" onClick="@command('showMe')" /> </html> </zk ...

htmlzk

Unable to Publish HTML File

I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...

jqueryhtmltwitter-bootstrap-3

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

Uncover hidden content by clicking a button with JavaScript

I need help with creating a function that hides additional content until a button is clicked. Currently, my script displays the content by default. How can I modify it to hide the content by default and only reveal it when the button is clicked? functi ...

javascripthtml

Utilizing variable references in an SCSS root file when importing from a module file

My SCSS skills are still in the early stages, as I'm currently diving into the basics. I'm curious to know whether it's possible to access variables and mixins from a parent file in a child module. To better explain, here's an example: ...

htmlcsssass

ERROR : The value was modified after it had already been checked for changes

Encountering an issue with [height] on the main component and seeking a solution Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '753'. Current value: '731'. I have th ...

htmlcssangular

Center unordered lists with varying numbers of items

I am currently facing a challenge while attempting to create four lists with different numbers of items and align them properly on my webpage. After applying inline-block to the ul class, I encountered issues with alignment as illustrated below: https:// ...

htmlcss

Vuejs dropdown selections are not working as expected due to a bug

My dropdown menu is being populated with options based on an API response that looks like the following: {"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{&qu ...

javascripthtmlcssvue.jsvue-directives

How do I retrieve the title of the current page and store it as a variable within Flask using Python?

Consider the following scenario with an HTML page; <html> <head> <title>Desired Title Value Goes Here</title> </head> <body> <h1>Hello World</h1> </body> </html> ...

pythonhtmlpython-3.xflaskjinja2

Troubleshooting issue with CSS code for table scrolling functionality

I have created an HTML page with a table that gets data from a database. I am trying to limit the size of the table by placing it inside a div like this: <div id="scrollablebody"> <table class="clientTable"> <thead> <tr ...

htmlcss

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Transitioning the <mat-icon> from one <mat-form-field> to another may not always result in the icon being updated consistently

Being new to Angular, I have been working on creating a form for blog posting and I am trying to include selectable category icons next to the title. In my current setup, I have made a form with selectable font awesome icons. However, I am facing an issue ...

javascripthtmlangularangular-fontawesome

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser

Show an image based on a query parameter

Currently, I am developing a PHP project and I am facing an issue with loading an image from a query string. Here is the code snippet I am using: <img src="load_image.php?name=Profile_Photo_Small" /> Is there anyone who can help me out with this pro ...

phphtml

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

htmlcss

What steps can be taken to prevent the controller action if the password and confirm password do not match?

Currently utilizing .Netcore MVC for my project. I am developing a registration page where users are required to input their email, password, and confirm the password. Although I can verify if the entered password matches the confirmation password, the con ...

javascripthtml.net-corebootstrap-4

Guide on utilizing flexbox to create a vertical stack of elements

I'm currently working on creating a layout similar to this: https://i.sstatic.net/eZurX.png To see my progress so far, check out: https://codepen.io/maketroli/pen/aaNezK Here is the code snippet I'm using: .product-descriptions { text-alig ...

htmlcssflexbox