Is the @media rule intended to be applied to all screen sizes, including those less than 768px wide?

There seems to be an issue with the css min-width 768 not working correctly on mobile devices. Interestingly, it works fine in inspect mode for widths less than 768 on the Google Chrome desktop browser.

@media only screen and (min-width: 768px){
#main {
    max-width: 75%;
    float: left;
}
}

However, when switching to mobile mode in the inspect tool, the problem resurfaces.

https://i.sstatic.net/m5XPi.jpg

The blogger classic theme I am attempting to modify can be found at

Answer №1

It's vital to include the meta tag viewport in order to prevent zooming. Make sure to insert the following code into the head section of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

What is the best way to navigate to a specific div while scrolling on a webpage?

Can anyone help me figure out how to make my page scroll between vertical divs directly, instead of the normal scroll behavior? I've tried using the ScrollTo plugin, but it's not working as expected because the example uses buttons for scrolling. ...

Adjusting the size of text in KineticJS to ensure it fits comfortably within a rectangle while

Check out this link: http://jsfiddle.net/6VRxE/11/ Looking for a way to dynamically adjust text, text size, and padding to fit inside a rectangle and be vertically aligned? Here's the code snippet: var messageText = new Kinetic.Text({ x: .25* ...

Styling does not affect an Angular component that is injected into an iframe

I am facing an issue with styling in an iframe when trying to append my own angular component. Despite various attempts, I have been unsuccessful in getting the styling to apply to the component within the iframe. Upon loading the iframe, I use JavaScript ...

The customization of jQuery UI Slider is failing to function as expected

In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...

Is there a way to use the same background image for both the left and right borders?

How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far: <%@ Page Language="C#" AutoEventW ...

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

What is the best method to extract the value of a TextField from an HTML file and transfer it

I am a newcomer to Nativescript and I'm interested in storing user data on my mobile device using Couchbase database. Currently, I have set up TextField elements for users to enter their first name and last name, with a save button available. My quest ...

Expansive width of form field

I have a yellow top bar that is fixed in position and spans 100% of the width. Inside this bar, there is a red div with fluid width on the left and a green div containing an input element on the right. The input element needs to take up the remaining spa ...

The timeline aesthetic can be achieved solely through the use of HTML, CSS, and potentially some Bootstrap functionalities

https://i.sstatic.net/EsDAE.png Up to this point, I've only been able to make it this far. I'm using a sample code from w3school https://i.sstatic.net/G1FcQ.png I've been attempting to get the year in the same position as in the image, bu ...

What could be causing my absolutely positioned div to be hidden from view?

I'm working on designing a slideout slideshow with three images and content that looks like papers hidden in folders, complete with a handle at the top or bottom of each folder displaying its name. Here's an example of what I'm envisioning: ...

Enhancing Text Clarity on iOS Devices

I've created a webapp that works smoothly on the majority of mobile devices. However, I've noticed that occasionally on my iPhone 5s (and I've heard similar experiences from users on other iOS devices), the text appears blurry. This issue se ...

Images are appearing misaligned in certain sections

I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...

I attempted to convert my CSS to SCSS, but encountered an error during the compilation process

{ "status": 1, "file": "E:/Natours/sass/main.scss", "line": 31, "column": 5, "message": "argument `$alpha` of `rgba($color, $alpha)` must be a number", "formatted": ...

Ways to conceal Bootstrap-designed elements behind a fullscreen overlay

I'm attempting to create a transparent layer to conceal the entire content of my page behind it. It works fine without the Bootstrap columns, but as soon as I add the columns for responsive design, it stops working (or maybe I'm just not understa ...

Stubborn boolean logic that refuses to work together

Seeking guidance on resolving a persistent issue with my website that has been causing me headaches for the past few weeks. This website was created as my capstone project during a recent graduate program, where I unfortunately did not achieve all the desi ...

What is the reason for elements such as "if" and "else" not being visually

I am currently developing a browser-based code editor with a unique feature. Task: The objective is to highlight specific keywords like if, else, for... when they are entered into the editor. textarea.addEventListener("input", function() { ...

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

The bootstrap modal form does not allow for user input of information

For the past few days, I've been encountering a strange bug with Bootstrap Modals that I can't seem to find a solution for online. Any help on this matter would be greatly appreciated. The section of my site that is currently giving me trouble i ...

What is the correct way to have a javascript function trigger a button click after the function has been completed?

My goal is to create a button that will close the current container and then automatically click the next button. Although I attempted to use document.getElementById("rnaMedium").click();, it did not yield the desired results. function disableLowHigh(){ ...