Which elements should I focus on when utilizing Media Query?

For the width specified in the CSS for various tags within my HTML, do I need to individually list each tag when setting CSS for a Media Query? If so, how can I do this while maintaining the same ratio for full screen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jenifer Troska</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/ico" href="images/icon.ico"/>



</head>

<body>
...
</body>
</html>

CSS ---- 

body{margin:0px; padding:0px; background:#fffde4 url(../images/bodyBg.jpg) repeat-x}

...
@media screen and (max-width: 640px) {
#mainWrap:{ width:50%;}
#mainPael: {width:50%;} 
h1 {width:50%;}
#webdesign {width:50%;}
#logoWrap {width:50%;}
}
htmlcssresponsive-designmedia-queriesmedia

Answer №1

One way to customize your website's style is by utilizing media queries to load different CSS files or by incorporating media queries directly into the same CSS file.

If you prefer to use media queries within a single file, you can do so by following this structure:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

@media only screen 
and (min-width : 321px) {
/* Styles */
}

@media only screen 
and (max-width : 320px) {
/* Styles */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

@media only screen 
and (min-width : 1224px) {
/* Styles */
}

The use of min-width alone signifies that the code should execute when the screen width is equal to or greater than the specified value, such as min-width: 1224px.

On the other hand, max-width is the opposite of min-width, and both can be used together to define a range of screen widths.

For more information and examples of media queries, you can visit the following resources:
- http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
- http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

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

Generating a downloadable picture with jQuery freeze frame

If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...

jqueryhtmlcss

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

Issues with absolutely positioned slideshows

Currently, I am attempting to design a slideshow using absolute positioning to layer images on top of each other. However, I am encountering a problem where the text below the slideshow is also being stacked on top of the pictures. I have tried enclosing t ...

htmlcsscss-position

Tips for effectively arranging images in a spiral formation

I'm striving to replicate the layout showcased in this screenshot : https://i.sstatic.net/RBg62.jpg My attempt involved utilizing columns with bootstrap 4. Initially, the layout appeared intact, but the elements being within a container-fluid caused ...

htmlcssbootstrap-4

Issue with Bootstrap collapsible menu not expanding when clicked

I want to make my collapsed navbar menu expand when clicked on a small screen. I've customized a Bootstrap navbar to split my links at each end of the bar. Right now, the links collapse when the screen size decreases, but clicking on the accordion but ...

htmlangularmenubootstrap-5

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

javascriptjqueryhtmlcss

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Is there a way to customize the ui-autocomplete div by adding a custom class? I have several autocomplete widgets on my webpage, and I need to style their drop-downs differently. Since editing the ui-autocomplete class directly is not an option, I am wor ...

javascriptjquerycssjquery-uiautocomplete

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

javascriptjqueryhtmlcss

"Implement a feature in JavaScript that allows users to click on images to navigate

I have a navigation feature on my website that allows me to cycle through images using the following code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num' ...

javascriptcssimagehyperlinkclickable

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

I'm having trouble getting a Twitter Bootstrap 3 navbar to collapse using data attributes, as it is not expanding properly. Just to give some context, the project I am working on is an ASP.NET C# MVC project that runs on DNN (DotNetNuke) CMS. When I ...

javascripthtmlcsstwitter-bootstrap

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

c#jqueryhtmlasp.net.net

How can I calculate the width of a character in an HTML5 canvas?

When using the .fillText function with a fixed-width font, I can easily adjust the height by setting the .font property. However, is there a way to accurately determine the width of an individual character? ...

javascripthtmlcanvasfont-size

Using Jquery variables for calculations and they do not work with numerical values

Hey there, I'm new to this so bear with me. I have a jQuery question that's puzzling me... I'm attempting to set the line height using the following method: var line_height = $('.container').css("height"); console.log(line_height ...

jquerycssvariablesmathheight

Scroll horizontally in a div with a minimum width while it is contained within a column using Bootstrap

I am seeking to create a bootstrap v4 grid with 3 columns, where certain content within the columns require a minimum width. This necessitates a horizontal scroll (overflow-x), but I am encountering some overlap where the scrollbar and content extend beyon ...

htmlcssbootstrap-4

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

A manual configuration has been set up to accommodate all the technologies mentioned in the title (webpack, typescript, phaser, and angular). While it works perfectly for angular component stylesheets, there seems to be an issue with including a global st ...

cssangulartypescriptwebpacksass

The symbol '★' represents the '★' content in CSS

Here is the CSS code I am using: .rating:not(:checked) > label:before { content: '★'; } However, when it is displayed on the screen, instead of seeing a ★, I see â˜. It's strange because if I use Firebug and manually change the ...

css

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

I am currently utilizing Soup and Selenium to access a particular page . My objective is to extract a comprehensive list of pricing and ratings for different types of packaging available on this webpage. https://i.sstatic.net/3gbJ7.png Displayed below is ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

javascripthtmlcssreactjsnext.js

ReactJS component experiencing issues with loading images

In my React project, there is a directory containing several images, and I am attempting to import them all into a carousel using Bootstrap. The current code looks like this: import Carousel from 'react-bootstrap/Carousel'; const slideImagesFold ...

javascripthtmlreactjsbootstrap-5

Do jQuery and AJAX both support application/json content type in all web browsers?

I have been managing my ajax requests like this: @header("Content-Type: text/html; charset=".get_option('blog_charset')); and in the JavaScript: $.ajax(.... ... success: function(response){ var obj = eval('('+response+') ...

jqueryhtmlajaxjson