Normal version with background image and mobile version with background color

Seeking advice on how to optimize my website for mobile devices. I have two separate CSS files - one for the mobile version and one for the desktop version. Combining them in the head of my HTML file is causing issues, as the background style from the desktop version is interfering with the mobile version, rendering it unusable. The CSS code for each version is completely different. Any suggestions on how I can make my site mobile-friendly while maintaining distinct backgrounds for both versions?

Here is an excerpt from the CSS code for the desktop version:

<link rel="stylesheet" href="index.css" charset="utf-8">
<link rel="stylesheet" href="mobile.css" charset="utf-8>

body {
padding: 0px 20px 0px 20px;
}

...

This is a snippet from the head section of my HTML:

<link rel="stylesheet" href="mobile.css" charset="utf-8">
  <link rel="icon" href= "tabicon.png">
    <title>Walibi Haunted Houses</title>
      <div class="menubar">

        ...

      </div>

Below is a segment of the CSS code specifically designed for the mobile version:

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

...

}
htmlcssmobile

Answer №1

Give this easy media query a try:

body {
  background: #00ff00 url(http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-color: #fff;
  
}

@media only screen and (max-width: 500px) {
    body {
        background: #00ff00;
    }
}
<p>Feel free to test it out by resizing the screen.</p>

Answer №2

When including 2 css-files within a third css-file, it's important to avoid using the traditional "HTML-style" <link ...> method.

To achieve this, your css-file normal_version.css should begin with:

@include url('index.css');
@include url('mobile.css');

Answer №3

Check out this alternate approach. Make sure to utilize the correct media query tag.

@media (max-width: 500px){
  body {background-image: none; background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
 .index {
        background-image: none;
        }
  
  head {
       font-family:'Coming Soon', cursive;
       font-size: 15px;
       color: #af111c;
       }
}

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

The 'SafeString' object does not have a 'get' attribute

I am having trouble rendering a string to a template. Here is the code I am currently working with: context = { 'order': order, 'ordered_items': ordered_items, 'change': change, ...

pythonhtmldjango

Utilizing button clicks to send fetch commands and extract data from websites

I need help with my Google Chrome extension. I have some fetch commands for an API, but I'm not sure how to send them when a button is clicked. Can someone guide me on the right approach? Is there a recommended method for a Chrome extension to extrac ...

javascripthtmlcssgoogle-chrome-extension

What ways can we implement identification features in Flutter Web applications, such as adding an ID or name property?

While developing a Flutter Web application, I am exploring a Web-UI-Testing framework that is Selenium-based. Unfortunately, I am struggling to locate an HTML element that represents a specific flutter widget by its id or name attribute. The widget key doe ...

javascripthtmlseleniumflutterflutter-web

Optimizing User Addition in Python Using Selenium

Currently, I am developing test cases to populate a new web app account with multiple users simultaneously. Here is the script I am using: driver.find_element_by_css_selector("input.ss-med.small").clear() driver.find_element_by_css_selector("input ...

pythonhtmlselenium

Ways to deactivate antd css-dev-only styles

I am currently working on a nextjs project using tailwind and antd. I am facing an issue where the antd Layout component styling is being applied and I am unable to remove it. :where(.css-dev-only-do-not-override-12upa3x).ant-layout-header This styling is ...

htmlcssnext.jstailwind-cssantd

Struggling to keep the footer anchored at the bottom of the page

When the content on an HTML page is minimal, the footer may end up positioned halfway up the page, creating a blank space below. This can be unappealing, especially on larger screens. Designers are frequently tasked with moving footers to the bottom of the ...

htmlcssresponsive-design

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

What is the proper way to specify the background image path in CSS?

My CSS file is located at: Project/Web/Support/Styles/file.css The image I want to use is found here: Project/Web/images/image.png I am attempting to include this image in my CSS file. I have tried the following methods: 1) background-image: url(/images ...

htmlcss

Design a stylish outline for the element <div class="loader">

Initially, I managed to create a border around the body without any issues. However, I encountered a problem when attempting to implement a rotating border animation. In order to achieve this, I had to create a div encompassing all my content. The issue ar ...

htmlcssborder

Ways to consistently return to the main home URL/directory within an HTML document

Greetings to all! Currently facing a challenge with HTML pathing. I want to ensure that every time I log out from Dynamics CRM Portals, I am redirected back to the "SignIn" page. The issue arises when I am in various URLs. For example, logging out from d ...

htmldynamics-365adxstudio-portalsdynamics-crm-portals

troubles arise when using undeclared functions in javascript

Recently, I've been working on implementing a Javascript CountDown Timer triggered by a button click. The Javascript code is stored in an external file, as well as the CSS for styling the timer. The problem arose when I tried including the Javascript ...

javascripthtmlasp.netvb.netcountdowntimer

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

phphtmlparsingcurl

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Within my design, I have implemented an <input type="number" step="1"> element for selecting font size. However, in the context of working on a large canvas, adjusting the number by 1 is hardly noticeable. It would greatly enhance ...

javascripthtmlinputuser-experience

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's

Currently, I am utilizing react, Bootstrap, and some custom sass to construct and style the front end of my web application. While the design appears good on mobile devices, there is an issue where users need to pinch the screen due to it looking slightly ...

cssmobilebootstrap-4sassmedia-queries

django leaflet - dynamically adjusting controls on HTML page with the click of a button

Presently, I am utilizing django-leaflet along with leaflet-draw controls. My goal is to make the draw controls accessible (and add them to the map) based on a specific event, such as toggling a button. Below is a basic jQuery structure that I currently h ...

javascriptjqueryhtmldjangoleaflet

Create a personalized attribute for division automation

Is it possible to automatically divide a dynamically populated ListView in jQuery-mobile into two groups based on the attribute values (Downloaded/Not downloaded)? Some listitems have the attribute status="true" while others have status="false". Here is t ...

javascriptjqueryhtmlcordovajquery-mobile

Transfer a document to a php server using AJAX and jQuery in place of a traditional form

Is there a way to use AJAX for uploading files in PHP without reloading the page or performing additional functions? I want to keep it simple. Any suggestions? <form action="upload.php" method="post" enctype="multipart/form-data"> <label st ...

jqueryhtmlajaxforms

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

Changing the order of rows and columns with CSS3 and DOM manipulation

I have implemented the following CSS code to alternate the background color of li elements. However, I am facing an issue where I need the CSS styling to remain consistent even if the rows have the .hidden class applied to them (with .hidden class having d ...

csscss-selectors