The mobile view is not displaying the footer in full width as expected

I am currently working on designing a website without using the meta viewport tag. My goal is to ensure that my website displays properly on both mobile and desktop devices. I have encountered an issue with the comparison between the home page (index) and inside pages. While the header and footer display correctly on the home page, the header on the inside page looks good but not as well as the home page, and the footer does not show properly in full width. I would appreciate any help on this matter. Thank you for your assistance. The problem seems to occur only on mobile and tablet devices.

htmlcssmeta

Answer №1

To ensure accurate assistance, please provide both your html code and css code. Additionally, you can showcase examples using platforms like codepen or jsfiddle. It seems like there are no media queries set in your code for mobile formats. Consider looking into how Bootstrap sets media queries to address this issue.

I checked your website on firebug and did not find any media queries implemented.

Here's an example:

@media (max-width: 648px) {
 .footercontainer {
   width: 90%;
  }
}

Answer №2

Note: I just realized that you did not mention using Twitter bootstrap. The example provided below requires Twitter bootstrap, or you can retrieve the Css classes from there.

To ensure that the text blocks in the footer are centered and stacked underneath each other on mobile devices, you can implement something like this:

<div class="footer">
    <div class="row hidden-xs">
        Desktop footer 
    </div>

    <div class="row visible-xs">
        <div class="col-xs-12 text-center">
            Icons and other content.
        </div>
        <div class="col-xs-12 text-center">
            Copyright information.
        </div>
    </div>

</div>

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

Steps to redirect a PHP page on 123-reg to eliminate the trailing slash:

When I look up my current webpage on Google, it shows as http://www.rg-s.co.uk/suvatcalculator.php/. The issue is that because of the extra slash at the end, the CSS does not load properly. However, if I visit the page without the extra slash using http:/ ...

phphtmldisplay

Four-region selection box

Is there a way to create a quad state checkbox without using a set of images for various icons? I know how to have a tri-state checkbox with indeterminate, but I need to rotate through 4 states. Are there any more elegant solutions available? ...

htmlcss

Ending a div tag inside another div element

I have set up a listings page with individual divs for each listing, loading content from a separate php script using $.post The issue I'm facing is hiding the listing, possibly related to this line of code: $('div.close_listing') I can o ...

jqueryhtml

Is there a way to customize the CSS ul menu specifically for the JavaScript autocomplete feature?

I have created a search page with autocomplete for the first textbox, but I noticed that the ul/li CSS classes used for styling the main menu are impacting the JavaScript list. How can I override the menu styling to display a regular list format? Being a ...

javascripthtmlcss

Connect a group of <div> elements via a hyperlink

Every time I attempt to add a hyperlink to the code snippet below, it interferes with the layout of the image and only links the icon rather than the entire flex container. I've experimented with <span> elements but haven't found a successf ...

htmlcsscss-animations

How can I use CSS to conceal the controls for an HTML5 video?

Seeking advice on how to hide and show controls on an HTML5 video section. I currently have a setup where clicking on the video div opens a modal that plays the video in a larger size. The code for opening the modal and playing the video is working fine. ...

jquerycsshtmlhtml5-video

Chrome does not support href while Edge does

href seems to be causing issues in Chrome, but it works fine on Microsoft Internet Explorer or Edge. It appears that the line (a href="....html")Something(/a) is not functioning properly on edge or safari. It behaves like a dropdown menu. There is a sig ...

htmlcssgoogle-chromemicrosoft-edge

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

My elements are dynamically generated from a live CSV file that updates every 1 minute. I'm aiming to manage these elements in the following way: Remove items no longer present in the CSV file Add new items that have appeared in the CSV file Maintai ...

javascripthtmlcsvd3.js

Differences Between Bootstrap Source Code and Bootstrap CDN Link

I am in the process of updating the user interface for my website, utilizing Bootstrap 5.3. Initially, I utilized the CDN link provided in the official documentation. Recently, I acquired Bootstrap Studio as a tool to streamline the UI development process. ...

htmlcssbootstrap-5

How to align text in an HTML email

Struggling to align text in an HTML email, with one part on the right and another on the left? Unfortunately, Outlook doesn't support the use of float, leaving you without a solution. Have you tried experimenting with text-align? Any helpful advice fo ...

htmlemailhtml-email

Modifying Stroke color in HTML5 Canvas

I am attempting to create a unique visual effect by drawing a circle resembling a clock using canvas 2d context. The idea is to initially draw the circle in black starting at point p1, and then when I complete a full circle tour it should erase as the colo ...

javascripthtmlcanvasgraphics

What could be causing my Django application to display a blank page?

The data returned from rasp.py includes the sensor data connected to Raspberry Pi and the current time. These values need to be passed from my Django application views to the HTML file to display a graph, but instead, I am getting a blank page. rasp.py # ...

htmldjango

Is it possible for one div to prompt an ajax response in another div?

In my attempt to create a main page with 3 div sections, I am using ajax to sequentially load content into each area. The idea is to have div1 already loading the page fetched from ajax as soon as the main page loads. This includes heavy mysql operations o ...

jqueryajaxhtmltriggers

What is the best way to link a style sheet in PHP when the files are located in different folders?

I have a php project structured in the following way : ├───public │ index.php ├───styles │ style.css ├───vendor └───views ├───category │ show.php ├───layout │ f ...

phphtmlcss

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

css

Guide on excluding the first row when referencing all rows with CSS

My div container is hosting a table and I have a requirement to set the height of all rows, except the first one, to a specific value. Additionally, I need to adjust the text size in each column excluding the first row: This snippet shows my current html: ...

jqueryhtmlcss

Has window.document.height become obsolete in the latest version of Chrome, version 17?

After recently upgrading to the most recent version of Chrome (17.0.963.56), I've noticed that the property window.document.height is no longer valid. Has anyone else experienced this issue? I haven't been able to find any information about why i ...

htmlgoogle-chrome

Tips for enhancing the display of tables on mobile devices?

I am currently utilizing for creating a table This is the HTML code I have implemented: <table class="responsive-table"> <thead> <tr> <th>Mon</th> <th>Tue</th> <th>Wed</th ...

csshtml-tablebootstrap-4materialize

Place 2 images side by side within a row using Bootstrap's grid system

https://i.sstatic.net/RVBpK.png Is there a way to center the images for the 2 app download links within the class="row" section? <div class="container"> <div class="row"> <div class="col-xs-4" style="text-align:right"&g ...

htmlcsstwitter-bootstrap

What is the most efficient way to modify the color of an ID within a list?

My website features a <ul> element with four nested <li> elements, each belonging to the class .list. In order to give them different colors, I assigned unique IDs to each one - <id="list1">, <id="list2">, <id="list3">, and &l ...

htmlcss