The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue.

Here is my desktop web page as displayed in my browser:

https://i.stack.imgur.com/qrPiL.jpg

And here it is on my cell phone:

https://i.stack.imgur.com/CDiD9.png

Although not very clear from these images, the banner appears too small on my cell phone.

Ideally, I want:

  • The width of the page content (including my <footer> element with a top border) should not stretch across the entire browser window when viewed on full screen desktop, but should fill the width of my cell phone screen.
  • The banner must never exceed the image width on my desktop, yet should expand to fit the whole width of my smaller cell phone

Is there a simplified way to achieve this?

htmlcssresponsive-designadaptive-design

Answer №1

Using media queries allows you to adjust styling based on the size of the viewport. Here is an example:

JS Fiddle Example

/* Styles for desktop here */
footer {
  background: red;
  width: 600px;
}
.banner > img {
  width: 400px;
}

/* Adjust properties when screen is less than 700px wide */
@media only screen and (max-width: 700px) {
  footer {
    width: 100%;
  }
  .banner > img {
    width: 100%;
  }
}

Answer №2

In addition to exploring media queries for optimal responsiveness, it is crucial to adjust the viewport meta tag within your header section. Ensure that you include 

<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> tags, instructing the mobile browser to display the page without zooming out excessively.

...
<head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Hello World</title>
        <meta name="keywords" content="Placeholder for future content.">
        <meta name="description" content="Web development group">
        <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...

You can then use F12 to view the webpage in phone emulation mode or access it directly on your mobile device.

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

Utilizing Selenium to pinpoint an HTML element through xpath

Currently, I am in the midst of deciphering a colleague's slightly chaotic HTML as I work on developing a website testing program utilizing Selenium WebDriver in Java. Progress has been made thus far (thanks to some helpful insights from SO), but I ha ...

javahtmlseleniumxpath

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

phpcsshtmlnav

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

javascriptphpjqueryhtmlcss

The div is empty when trying to display Google Maps

When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from S ...

htmlcssgoogle-maps

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

Is there a method to incorporate links or buttons when hovering over a row in a kendo grid? I've searched through the documentation and looked online, but haven't found a solution. I'm considering if I should modify my row template to displa ...

javascripthtmlkendo-ui

incorrect indexing in ordered list

I am facing an issue with the ngIf directive in Angular. My objective is to create a notification system that alerts users about any missing fields. Here's a stackblitz example showcasing the problem: https://stackblitz.com/edit/angular-behnqj To re ...

htmlangulartypescript

Looking to display the view source of an HTML page, but it keeps redirecting to another site when I try. Anyone know how to diagnose and fix this issue?

Can anyone assist me in displaying the HTML source of a page without it redirecting to another site? Here is the URL: ...

html

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg

What could be the reason for the page scrolling upwards when clicking on href="#"?

I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...

javascripthtmlajax

What's preventing the buttons from shifting positions?

Having some trouble with my Minesweeper Web Game setup. My buttons are stuck in place and won't budge. Can someone help me figure out what's wrong? Here's the code snippet I've been working on (FYI, using NetBeans 8.1 IDE) HTML: <! ...

htmlcssnetbeansnetbeans-8.1

text within the table is overlapping when being created dynamically in the <table> using javascript and jquery.quickflip.js

Hello everyone, I am currently working on dynamically generating a table using tabs created with jquery.quickflip.js. However, I have run into an issue where the text from one tab may overwrite values in another tab when switching between them. Below is ...

javascriptjqueryhtmloverlap

Utilize custom fonts from your local directory within a Vite Vue3 project

Inside my main.scss file, I am loading local fonts from the assets/styles/fonts folder: @font-face { font-family: 'Opensans-Bold'; font-style: normal; src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truety ...

cssvue.jsvuejs3vite

I would like to request information regarding PHP

I am attempting to retrieve information from a PHP file and insert HTML code into the <div id="1"..., but there are no errors showing and nothing is being inserted into the div. Could the issue be with the AJAX code or is it a problem within the HTML st ...

javascriptphphtml

The hover effect fails to function properly after altering the background color. The default color setting is transparent

<button class="button-main slide">Slide Left</button> .button-main{ color: black; outline: none; background: transparent; border: none; letter-spacing: 0.0625em; padding: 8px 10px; text-transform: uppercase; font: b ...

htmlcss

What is the best way to display a scrollbar at the bottom of the table while setting the table height to

After writing the css provided below, I noticed that it works fine on my laptop screen. However, when viewing it on a larger monitor, there is empty space at the end of the table. .wrapper{ width:auto; height: 500px; overflow-x: scroll; ...

htmlcssangulardatatablesangular-datatables

Steps for adding a row as the penultimate row in a table

There aren't many solutions out there that don't rely on jQuery, but I'm looking to avoid it. The row content needs to be generated dynamically. Here is my flawed approach: function addRow() { let newRow = '<tr><td>B ...

javascripthtmlhtml-table

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Having some trouble setting up capybara-webkit on my Rails 4.2.1 app. Tests are running fine, links are being clicked, and ajax calls are working, but there's one odd issue with capybara-screenshot gem. I wanted to capture html screenshots with all as ...

cssruby-on-railsajaxasset-pipelinecapybara-webkit

Limit jQuery script to operate exclusively on a single page

Despite the abundance of answers to similar questions, my lack of JS skills hinders me from implementing them in my specific case. On my WordPress site, I have a script that changes the navigation bar's color when scrolling down to the #startchange CS ...

jquerycsswordpress

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

The combination of AddEventListener in the parent and postMessage in the iframe is ineffective

As I delve into the Stripe documentation to develop a new feature, I have encountered an issue regarding the communication between a webpage and an iframe. The code in index.html: <!DOCTYPE html> <body> parent<br> <iframe src="./ ...

javascripthtmliframestripe-paymentspostmessage