Optimizing CSS Styles for Mobile Devices

I am having trouble adjusting the CSS on my website to make it more mobile-friendly. The site renders correctly in major desktop browsers like Chrome, IE, and Firefox, but there are issues with the rendering when viewed on mobile Safari or Chrome. Interestingly, IE mobile displays the site correctly.

To view the jsfiddle, click here: https://jsfiddle.net/1mxLfzyb/

You can visit the live URL at .

HTML

<!doctype html>
<html>
    <html lang="eng">

        <head>
            <meta charset="utf-8" />
            <title>Lazy Quiz</title>
            <link rel="stylesheet" href="default.css" />
        </head>

        <body>
            <div class="wrapper">
                <header class="header">LAZY QUIZ</header>
                <article class="main">
                     <h2>Quiz of the Day!!</h2>

                    <iframe src="pages/QOD/qod.html"></iframe>
                </article>
                <aside class="aside aside-1">
                    <ul>
                        <li><a href="pages/Entertainment/entertainment.html">Entertainment</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Sports</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Games</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">Geography</a>

                        </li>
                        <li><a href="pages/Entertainment/entertainment.html">History</a>

                        </li>
                    </ul>
                </aside>
                <aside class="aside aside-2">Aside 2</aside>
                <footer class="footer">
                    <ul>
                        <li>Home</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </footer>
            </div>
        </body>

    </html>

CSS

html{
    margin:0px;
    padding:0px;
    background-color:#a8a8a8;
}
/*
body {
  padding: 2em;

}
*/
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  font-weight: bold;
  text-align: center;
  width:1000px;
  margin:0px auto;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background:black;
  color:white;
  padding:20px;
  margin:10px;
}

.aside-1 {
  background: gold;
  margin:10px;
  background:#ededed;
  width:100px;
  height:575px;
}  
 .aside-1 li {
    list-style:none;
    font:bold 14px Tahoma;
    padding-bottom:75px;
    text-align:left;
  }

 .aside-1 a:link{
    text-decoration:none;
    color:black;
 }

 .aside-1 a:visited{
    text-decoration:none;
    color:black
}

.main {
  background: deepskyblue;
  margin:10px;
}

iframe {
    display:block;
    width:100%;

    height: 500px;

    }

.aside-2 {
  background: #66CCCC;
  margin:10px;
  width:100px;
  height:575px;
}

.footer {
  border-top:2px solid #e0e0e0;
  margin:10px;
}
.footer ul{
    padding:0px;
    text-align:left;
}

.footer li{
    padding:5px;
    display:inline-block;
    list-style:none;
    font:bold 14px Tahoma;
    margin:0px;
    justify:left;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 4 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Answer №1

implementing media queries

illustrations of media Query

@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
}

In my view, utilizing Bootstrap Framework is beneficial. You can educate yourself at here

AMENDMENT 01

.wrapper {
  width: 100%;
}

Answer №2

To ensure your website is responsive, consider updating the .wrapper element's style from width: 1000px; to max-width: 1000px;. This adjustment will maintain a maximum width of 1000px on larger screens while allowing it to scale down smoothly on smaller devices without being fixed at 1000px wide.

Answer №3

Consider implementing the meta viewport tag for improved mobile responsiveness: Visit Mozilla Developer's Guide

<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

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

Python code to convert HTML into JSON format

"I'm currently searching for an efficient method to convert HTML to JSON using Python, but so far I've only come across complex ways that require manual building which seems impractical for large HTML files. Can anyone provide assistance? I' ...

NextJS's conversion of HTML to image is malfunctioning, resulting in the download of the identical reference

Having encountered difficulties with the html-to-image library while working on a Next.js project, I used the following code to convert images: import Image from "next/image"; import {toPng} from 'html-to-image' const divReferenceA = u ...

Using PHP to convert user input from an HTML form into an SQL file within the current folder (Inquiry)

I am seeking an alternative method to create a database without using myphpadmin or MySQL. I have been encountering difficulties in setting them up. Is there a simpler approach where I can use a .html file with a form and PHP code to collect user input and ...

Reloading a page will display [object CSSStyleDeclaration]

Upon editing content and saving changes, instead of displaying my updated content when refreshing the page, it shows [object CSSStyleDeclaration]. function newElement() { let li = document.createElement("li"); let inputvalue = document.querySelector ...

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

Creating a WordPress widget that links to a local file

Hey there, I've been attempting to utilize the text widget in order to link to a local file, but unfortunately, it's not working as expected, and I'm unsure of the reason why: Here is what I am using: <a href="file:///D:/" target="_blan ...

What is the best way to update a specific section of my website by modifying the URL while keeping the menus fixed and the site functioning smoothly?

I am in desperate need of assistance as I search for a solution. Currently, I am working on a project involving music within a web browser or application. My goal is to utilize HTML, PHP, JS, and CSS to create this project. If I start with a website, I p ...

Tips for navigating through elements generated with ng-repeat as I scroll

There is a list generated using ng-repeat along with two buttons for moving up or down. Users have the option to select any item from the list and utilize the buttons to navigate through it. However, when I lower the selected item using the "go down" butt ...

Adding a checkbox to menu items in a ReactJS application can be accomplished by utilizing specific components

I have successfully created dynamic menus using a recursive function, and they are displaying in the correct order without any issues. Requirement: My current goal is to identify the last level of menus and assign a checkbox with the value corresponding ...

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

Positioning divs around a circle can be quite challenging

Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration. http://jsfiddle.net/rkqBD/ In the provided ex ...

Ways to .focus() on input field while using Modals in Bootstrap

When I activate this Modal, I would like the mouse cursor to automatically focus on the textbox Therefore, my goal is to ensure that the textbox receives focus() upon modal opening. This involves both CSS and JS files <link rel=& ...

Adjust the Size of Bootstrap 4 Dropdown Caret Icon

Currently, I am using the Bootstrap v4 framework on my HTML page. I am looking to resize or increase the caret size in my dropdown list. Does anyone have any tips on how to accomplish this? https://i.sstatic.net/kCNPK.png Below is the code snippet: < ...

What could be causing the issue with image handling in ASP.NET deployed on a local IIS server?

My web app, built using ASP.NET 4 MVC2 architecture in Visual Studio 2010, has been deployed to my local IIS server under the virtual directory EasyMan4. Recently, I added an image to the Content Folder via Solution Explorer. In the Site.Master page, I ins ...

Choose a particular text node from the element that has been selected

Can anyone provide guidance on how to extract the text "Items Description" from the following HTML snippet using jQuery? <div class="items"> "Items Description" <ul> <li>1. One</li> <li>2. Two</li&g ...

Automatically sending a confirmation email to a specified email address in a designated form

I'm looking to provide users who fill out a form with confirmation emails that include rich text content. ...

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

Asynchronous AJAX request using JQuery loader with async:false setting

As a newbie to the world of jQuery, I find myself lost in solving my current issue. Despite checking various solutions to similar problems, none seem to work for me. Working on MAC OS X using Safari with JQuery 2.1.1, I must ensure that my platform is comp ...

What is the best way to consolidate multiple JS files into one main file that I can easily reference in my HTML code?

I've dedicated countless hours to watching videos and compiling a comprehensive library of assets, similar to p5.js (I'm especially fond of Dan Shiffman's content). I now have numerous files for various functions - init.js, dom.js, drawing.j ...