Implement the stylesheet to accommodate different screen sizes while still maintaining the integrity of the standard screen

I've been searching through various discussions and questions, but I have not found the exact solution to my issue.

The website I created fits within a 960px block for optimal viewing on iPads, but now I need a stylesheet to be applied when the screen size is smaller than 480px for mobile devices.

I seem to be encountering problems with the meta viewport settings. I have tried different methods, such as using "

<link rel="stylesheet" href="/templates/dervans/css/mobile.css" media="screen and (max-device-width: 480px)" />
" in the header along with "
<meta name='viewport' content='width=device-width, initial-scale=1'>
". This approach works, but it causes the website to break on larger mobile devices like iPads that exceed 480px in width. Removing the viewport tag solves the issue on iPads, but then the mobile CSS does not apply.

Do you have any suggestions or solutions?

javascripthtmlcssmobile

Answer №1

To modify your website design for smaller screens, include the following code in your CSS file:

@media screen and (max-width: 480px) {
    .class or #id{
        background-color: lightblue;
    }
}

Answer №2

There are a few different approaches you can take.

One option that stands out to me is using media queries, as explained by expert Warren Grimskin:

@media screen and (max-width: 480px) {
.head{
    color: #000000;
}

}

Alternatively, you could reference separate CSS files in the head section of your HTML document like this:

<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="mobilestyle.css">

The styles defined in the second CSS file will take precedence over those in the first file.

Don't forget to include a viewport meta tag for proper scaling:

<meta name="viewport" content="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

Using identical variable names for functions in Node.js

I'm feeling a bit puzzled about the following code snippet. Is it possible to create a class in JavaScript like this? module.exports = function testName(params){ testName.test = function(req, res){ //some code here } return testName; } Inste ...

javascriptnode.js

Is there a way to collapse just one specific row in Angular?

I am struggling to toggle only the selected row, any suggestions? Take a look at my code and demonstration here: https://stackblitz.com/edit/test-trainin-2-gv9glh?file=src%2Fapp%2Fapp.component.scss Currently, all rows are being toggled when clicked, but ...

javascripthtmlangular

The vertical-rl writing mode fails to function properly when the website is viewed within the Facebook app

I am facing an issue with a vertical button on my website. It works fine in browsers, but when the webpage is shared on Facebook and opened within the Facebook app, the button's alignment gets distorted. How can I resolve this problem? <div class= ...

htmlcss

Tips for inputting a password using Selenium webdriver when the password style is set to display:none

Currently, I am facing an issue with logging in to a page that has both a login and password field (betmarathon[d.o.t]com) using Selenium Webdriver. While Selenium is able to enter the login correctly, I am encountering difficulties when it comes to enteri ...

javahtmlseleniumauthenticationvisible

Error: The lambda response was not defined. Please review your function code. The response returned with a status of 500 in 583 milliseconds

https://i.sstatic.net/GUHr9.png I'm experimenting with Netlify and its Lambda function feature to execute a Node.js function. Following the guide at https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/. ...

javascriptnode.jslambdanetlify

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am utilizing PHP, Smarty, and jQuery in the development of my website. Currently, I am working on implementing checkboxes within a Smarty template. Below is a snippet of my Smarty code related to checkboxes: <table cellpadding="5" cellspacing="0" bor ...

phpjavascriptjqueryhtmlcheckbox

Responsive Image Resizing with Bootstrap for Smaller Screens

I'm struggling to resize a responsive image in Bootstrap using the carousel example on their official website. <div class="container"> <div class="other-div"> .... </div> <div id="carouselExampleCon ...

csstwitter-bootstraptwitter-bootstrap-4

What is the best practice for importing React components?

In my experience with React, I've noticed two different ways of importing and extending components. The first way that I typically use is shown below. import React from 'react'; class SomeClass extends React.Component { //Some code } ...

javascriptreactjscomponents

Is comparing strings in JavaScript as efficient as comparing numbers?

Considering creating a JavaScript enum library involves deciding how to store the values, I'm at a crossroads. Should I opt for speed in comparison or prioritize readability during debugging by using strings or numbers? While objects are an option too ...

javascriptstringperformanceenums

How can I reset Owl Carousel following an ajax request?

After a successful ajax call, I'm trying to reinitialize the Owl carousel. The data changes but the view needs to remain the same. However, I'm facing an issue where the carousel structure does not reinitialize. It works perfectly fine upon initi ...

javascriptjqueryajaxowl-carousel

The overlay background is being obscured by surrounding elements

Hey there! I'm experimenting with some basic coding and ran into an issue with an overlay. Here's the site link: Sorry for the strange language. :-) If you click on the button with the tiny icon, you'll notice that the overlay form isn&apos ...

javascriptjqueryhtmlcss

Create a replication of this in VB.NET using an ASPX Repeater to iterate over the specified content

Need help with repeating the following code in vb.net/asp.net: <ul id="prod_nav" class="clearfix"> <li class="top"><a href="05-Pink-02-Category-List.html" class="top_link"><span class="down">Body and Trim</span></a&g ...

asp.netcssvb.netasprepeater

I am in need of setting up two rows side by side using the display

I'm trying to have two rows side by side using display grid, but I'm facing some issues. When I use the following CSS... .grid-container { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-column-gap: 100px;} It cre ...

htmlcssbootstrap-5

Problem with integrating MEAN stack and bootstrap using bower

Recently, I've been delving into new methods of development and stumbled upon the MEAN stack. You can learn more about it here - After setting up Mongo, Node (and npm, among others) following the instructions on the website, I encountered a problem w ...

javascriptnode.jsbowermean-stack

Working with a complex JSON structure in JavaScript exemplifies the use of loops

I am currently utilizing json.data.schedules[0].liveVideoList, json.data.schedules[1].liveVideoList, json.data.schedules[2].liveVideoList and so forth. Can someone please guide me on how to implement a loop to retrieve all paths? Here is the code in scri ...

javascripthtmljsonnested

Struggling to position an image and text side by side within a div using CSS

Is there a way to display a message inside a div with an icon positioned to the left? The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div. https://i.sstatic.net/RnZMq.png https://i.sstatic.net/aSR ...

htmlcss

Tips for using an array of elements as an argument with the includes keyword in ReactJS or JavaScript

My code is designed to filter data using the includes keyword: Const filteredData=candidate Data.filter(item=>checkboxData.includes(item.skill.map(I=>{return i}))) CheckboxData=[html,css..] CandidateData=[{name:Alan,skill:[html,css]}] ...

javascriptjqueryreactjsfilterreact-redux

To use Material-UI Tooltip, the child title prop must be removed

I am facing an issue while trying to implement the Material-UI Tooltip component on a component that already has the title property. I need to use the child with the title prop, but I'm unsure if it's possible to combine both or if I should look ...

javascriptreactjsmaterial-ui

Issue with the page base and Jquery Ui tabs URL

Having an issue with jqueryui tabs. Here's the code I'm using: // jQuery Tabs $( "#tabs" ).tabs(); // Open correct tab based on URL hash var hash = window.location.hash; var index = $("#tabs a").index($('#link-'+hash.replace('#& ...

javascriptjqueryjquery-ui-tabs

Filling an asynchronous array by invoking a function just before

const request = require('request'); let requests = []; let values = []; function makeRequests() { for (x in list) { requests.push(requestFunction(x)); } } function requestFunction(x) { request("url2", function (error, respon ...

javascriptnode.js