Styling in media queries can override the styles of its parent element without

Here's the fiddle I've been working on: http://jsfiddle.net/9vu64/

Everything was functioning smoothly with my dummy site queries, until I added the following code snippet below. In the fiddle, it seems that #header is adjusting its width based on the media query header regardless of resolution. If I remove it, everything works perfectly fine without any issues. I'm struggling to identify the cause of this problem. Thank you.

@media (min-width: 325px) {
    #contain {
        width:285px;
    }
    #header {
        width:285px;
    }

Answer №1

Styling with CSS

To make your website responsive, try using the max-width property in your CSS code.

@media (max-width: 325px) {
   #contain {
      width:285px;
   }
   #header {
      width:285px;
   }
} 

Another suggestion is to utilize percentages for setting widths and establish a default width like this:

#contain{
   width: yyyypx;
} 

Additionally, consider using media queries for max-width rather than device width - screen width may be more suitable for your purposes.

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

Exploring the hover effect in CSS pseudo classes

I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu. My next task is to create a hover effect for these elements, where the background color changes to gr ...

"Maximizing Bootstrap Functionality with Angular 2: Step-by

I'm experiencing an issue with Angular2, Bootstrap 3.3.7, and Bootstrap Plugins. I have imported all the necessary stylesheets and JavaScript files in the 'index.html' file. Below is the snippet from the index.html: <!-- Bootstrap & ...

The comments entered into the box are being overridden instead of being posted

I have encountered an issue where, upon hitting the post button, the comment is successfully posted on the page. However, if I hit the button again, it seems to override the previous comment. Can someone please provide clarification on this matter? Additio ...

Adjusting the screen width to activate a responsive nav bar with a centered title

I'm facing an issue with the alignment of the heading within a navigation bar, causing the links to wrap before the collapse of the nav-bar occurs - https://i.sstatic.net/bKyPM.png I am trying to make the links collapse earlier than they currently d ...

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

Causes for the display of the text within the alt attribute

Recently, I attempted to view an HTML page in text browsers and noticed that the alt attribute value of the img tag was visible. I decided to omit the alt attribute and instead utilized CSS: .headerImg:after, .headerImg::after { conte ...

What’s the best method for enclosing a table and text within a div?

The following code snippet generates the following output: However, my desired outcome is this: When I remove <div>hello world</div>, the table fits perfectly within the outer div. But when I add text to the div along with the table, it doesn ...

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

What is the best way to position an element on the left side of the navbar without having it animated?

Could someone assist me in placing the Life's Good logo on the left side of the nav bar without applying the animation from the "btn" class? Below is a snippet of my code with an example where I want the logo highlighted in Yellow: * { padding:0; m ...

Mobile view doesn't quite center using flexbox, even though it works fine on desktop

Utilizing flexbox, the two distinct sentences that form the content of the page are centered. However, upon viewing the website on my mobile phone, the second sentence appears aligned to the left side. Here's how the site appears on a phone I've ...

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

Attempting to change the background color of a table row when hovering in React, but experiencing no success

Describing the appearance of my table row: <tr onMouseEnter={() => {this.buttonIsHovered = true} } onMouseLeave={() => {this.buttonIsHovered = false}} className={this.buttonIsHovered ? 'hover' : null}> The initial value ...

Troubleshooting: Unable to get the :last selector to work

$('.data_row:last').after('<tr class="odd"> <td class="first data" style="min-width: 29px;">2</td></tr>'); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> < ...

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

Can ng-click be injected into an ng-bound HTML div in an Angular application?

In my controller, I am returning HTML using the following function: $scope.filterLocation = function(obj) { var loc = $filter('filter')( $scope.locationss, {'product_code': obj}); var htmlstring = ""; angular.forEach(loc, function(v ...

Interactive sidebar component with navigation and animated section markers

For weeks, I've been attempting to create a navigation sidebar similar to the ones shown in these images: Even though getbootstrap.com/components offers appealing navigation sidebars, I have not found a built-in component in their library. This has m ...

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

Does anyone know the ins and outs of how the website www.nikebetterworld.com was created?

Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...