WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know

I'm facing an issue with the header and footer being cut off on mobile devices. When viewed on a tablet or phone, the header doesn't display across the full width of the screen. This problem arises because the Wordpress theme was created in 2010 using a child theme.

You can visit www.canonbody.com to see the issue for yourself. Here are the relevant lines of code:

#colophon,#wrapper,.inner{width:1050px;min-width:1020px;}

header{width:100%;device-width:100%;min-width:100%;border-bottom:2pt solid #000;padding-bottom:17pt}

#footer #colophon{position:relative;height:292px}
#colophon{line-height:20px;padding-top:7px}

Answer №1

One solution is to apply display:table to the header element, which resolved the issue for me. However, the gray background may not extend all the way to the edge in some cases, so you might also need to add display: table to it.

In addition, Firefox supports using width: -moz-fit-content; as a workaround, but this property is not supported in other browsers.

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

Strange gap between element and border on chrome

I noticed some strange spacing between the div borders and elements when I wrapped a few divs inside a container. This issue is only happening on Chrome and Edge, while Mozilla seems to display it correctly. My code includes the usage of Bootstrap along w ...

Struggling to center divs in HTML and CSS but running into issues on mobile devices?

I've been facing some serious CSS issues lately! Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narr ...

Aligning Card in Center using Bootstrap

Having trouble centering the card properly, as a beginner I'm not sure what to do. </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-4 co ...

Implementing an active class to an element based on the current URL using Jquery in Django

Is there a way to dynamically add an "active" class to an element based on the href? This is what my template in Django looks like: <div class="panel side-panel-1 category"> <h4 class="title1">Sections</h4> <ul class="clear-list"> ...

What could be causing my fixed header to disappear in Safari 5?

I am experiencing a strange issue with my fixed header on Safari 5 for iPad. The header disappears once it scrolls down to a certain point, even though it works fine in IE, Firefox, Chrome, and the latest version of Safari. Has anyone else encountered this ...

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

Encase a group of div elements with identical styling

Looking for a solution on how to programmatically wrap a set of divs with a parent div based on a certain class match. Any suggestions or ideas on how to achieve this? ...

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

My React application is not showing the CSS styles as intended

In my project, I have a component file named xyx.js where I properly imported my scss file './xyz.scss'. Both of these files are in the same folder. Interestingly, when I view the styles using the Chrome scss extension, everything seems to be wor ...

Want to know how to center the value of a slider range input in your React project using NextJS and Tailwind

Can someone help me with the issue I'm having with the offset? Is there a way to link a value to the thumb? I've tried two methods, but one gives a significant offset and the other gives less. However, it seems more like a workaround than a solu ...

Create a unique custom design for your Mapbox GL control

When developing the website, we utilized Angular 8, Typescript, and SCSS. We are using mgl-map to display a map, and I wanted to create a custom control for it with unique styles. I added the custom control to the map using: const centerOnCoordinatesC ...

The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: https://i.sstatic.net/FsHq5.png The problem lies in my inability to underline the selected optio ...

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

Coat the div with a uniform shade of pure white

I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...

Unique float structure within a division of divs

Can divs be floated within another div like this? Here is the code: <div class="event_month"> <div class="event1">1</div> <div class="event2">2</div> <div class="event3">3</div> <div class="event4">4</di ...

Having trouble with Javascript/jQuery not functioning in IE8?

My current project involves a website that functions smoothly in Chrome, but encounters issues with running JavaScript/jQuery scripts in IE8. Even a simple alert on page load fails to execute. Admittedly, my approach is a bit messy as I have mixed CSS an ...