Is there a simple solution to this responsive layout problem?

HTML & CSS
1

Preamble

My IOT temperature monitoring device has a “dashboard” with numerous critical features which I am reluctant to give Admin access in case anyone selects the remote “Reset Device” feature!

This screenshot shows the hidden features in the left-hand menu which work as expected on all responsive platforms.

ScreenDump:

1305×1015 143 KB

Recently a live “Share” option was introduced which I can confidently supply the link unfortunately…

Responsive Layout Problem

Desktop rendering is the problem because the empty left-hand menu container pushes both the graph and summation to the far right-hand side of the screen. Mobile works fine because a responsive “Hamburger” menu hides the left-hand menu.

SHARED LINK

It appears the relevant CSS file is shared by both “Admin Dashboard” and “Shared Screen” which may cause problems if the CSS file is modified.

The template is used by two backend colleagues designers with restricted CSS knowledge, same as myself :frowning:

Hopefully there a simple solution?

Update:

While trying to describe the problem I noticed a new “device-view.php” page is used to display the shared information.

I download the shared page and added the following style to the header and was surprised it did not solve the problem?

<head>
...
...
...

<style>
/* nicked from: first-layout.css: line 428 */
@media (min-width: 1200px)
.page-container {
    padding-left: 250px; 
   /* DOES NOT CLEAR PROBLEM */
    padding-left: 5px; /*OVERRIDE - REDUCED PADDING */
   background-color: red; /* SHOW MODIFICATIONS */
    -webkit-transition: padding-left .3s;
    -moz-transition: padding-left .3s;
    -o-transition: padding-left .3s;
    transition: padding-left .3s;
}
</style>

</head>
<body ...>
2

Inline style taking precedent? Does !important work?

3

Where would I use ! important?

4

I strongly dislike using !important, but for CSS that I have no control over to change I have used it before. eg. user scripts working with sites not my own.

It goes after any rule you want to “force” eg.

padding-left: 5px !important;

If that isn’t enough you could try using every id possible in the selector path.

5

I tried ! important and it had no effect.

I checked the first-layout.css and modified the following and it worked as expected:

.page-container{
padding-left:250px;
padding-left:10px; /* MODIFIED */
-webkit-transition:padding-left .3s;
-moz-transition:padding-left .3s;
-o-transition:padding-left .3s;
transition:padding-left .3s}

I then reverted the modifications and used this CSS in the header and it worked a treat :slight_smile:

<head>
...
...
...
<style>
/* nicked from: first-layout.css: line 428 */
.page-container{
	padding-left:0px;
	max-width:1288px; margin:0 auto;
	background-color: #f00; /* COSMETIC TO SHOW CHANGES */
}
</style>
</head>
<body ...>

It looks as though the @media query was not the problem.

Many thanks for your suggestions.

Edit:
Hopefully my friend will be able to easily update the relevant page.

LOCAL ScreenDump

1920×1016 60.8 KB

1 Like
6

Unfortunately the suggested change was not easy because the Share.php file included a header.php file which had the DOCTYPE, header, styles and even the top logo :frowning:

The following KLUDGE was used:

<div class="page-container" style="padding-left:0px;margin:0 auto;">...
...
...

I far prefer using this method to include files:

<!DOCTYPE HTML>
<html lang=="en">
<head>
   <?php include 'header.php'; ?><!-- 
   <!-- ADDITIONAL head information goes here -->
</head>
</body>
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.