Tips for optimizing the display of a website on mobile devices

I'm facing an issue with the layout of a table and an image on mobile devices. On PC, they display correctly side by side but on mobile, the image overlaps the table or remains next to it. I built the table using Bootstrap 4 as a requirement. I attempted fixing the position of the table which resulted in the image overlaying the table. Removing the fix caused them to stay on the same row requiring horizontal scrolling.

HTML:

<div id="bottom_row" class="container-fluid text-white pt-5 position-absolute">
        <h2 class="font-weight-bold">TABLE DATA</h2>
        
        <table class="table text-white font-weight-bold w-50" id="table">
            <tbody>
                <tr>
                    <td class="border-top border-info border-3" scope="">COURSE</td>
                    <td class="border-top border-info border-3">38.40</td>
                    <td class="border-top border-info border-3">DATE</td>
                    <td class="border-top border-info border-3">38.40</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX.XX</td>
                </tr>
                <tr>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX.XX</td>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX.XX</td>
                </tr>
            </tbody>
        </table>

        


    </div>
    <div id="graph" class="">
    <img id="graph_img" src="graph.png" class="">
</div>

CSS:

body{
font-family: Helvetica, sans-serif;
background-color: rgb(38, 68, 105); 
 }
#top_row h3{

color: rgb(71, 147, 176);
float: left;
}
#top_row h2{

padding-left: 20%;
float: center;

}
#top_row h5{

float: right;

}
#top_row{
clear: both;

}

}
#bottom_row{
clear: both;
}

#graph_img{

padding-left: 55%;
height: 400px;

}

#graph{
padding-top: 80px; 
}

table{
font-size: 18px;
margin: 0;

}
img{
width: 100%;
}


.border-3{
border-width:3px !important;
}
htmlcssbootstrap-4

Answer №1

    <style type="text/css>
        body{
font-family: Helvetica, sans-serif;
background-color: rgb(38, 68, 105); 
 }
#top_row h3{

color: rgb(71, 147, 176);
float: left;
}
#top_row h2{

padding-left: 20%;
float: center;

}
#top_row h5{

float: right;

}
#top_row{
clear: both;

}

}
#bottom_row{
clear: both;
}

#graph_img{

height: 200px;
width: 50%;
position: center;
text-align: center;

}

#graph{
text-align: center;
}

table{
font-size: 18px;
margin: 0;

}
img{
width: 100%;
}


.border-3{
border-width:3px !important;
}
    </style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="bottom_row" class="container-fluid text-white pt-5 position-absolute">
        <h2 class="font-weight-bold">DONNEES DE MARCHE</h2>
        
        <table class="table text-white font-weight-bold w-50 " id="table">
            <tbody>
                <tr>
                    <td class="border-top border-info border-3" scope="">COURS</td>
                    <td class="border-top border-info border-3">38,40</td>
                    <td class="border-top border-info border-3">DATE</td>
                    <td class="border-top border-info border-3">38,40</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                    <td class="border-top border-info">LOREM IPSUM</td>
                    <td class="border-top border-info">XX,XX</td>
                </tr>
                <tr>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                    <td class="border-top border-bottom border-info">LOREM IPSUM</td>
                    <td class="border-top border-bottom border-info">XX,XX</td>
                </tr>
            </tbody>
        </table>

    </div>
    <div id="graph" class=""><img id="graph_img" src="graph.png" class=""></div>

I made modifications to the image style by adding the text-align property and setting a height for responsiveness and positioning within the code.

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

Effortless design using Flex Box

Creating a consistent HTML structure for my website using bootstrap 4 is my goal. The key elements include: sidebar, h1, and content. The challenge lies in organizing them effectively based on the screen size: For mobile view, they should be arranged in ...

csslayoutflexboxbootstrap-4

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Redefining the colors of an SVG when it is a CSS background image in code

I currently have an SVG icon encoded within my CSS file. I'm looking to change the color of this icon when a user hovers over it without creating a duplicate icon in a different color. Here's a snippet from my CSS file: background-image: url("d ...

htmlcsssvgbackground-image

Styling with CSS to show an image and text on the same line

I would like to show text and image on the same line, with the image slightly above the text. View Demo html img.del { display: inline-block; float: right; cursor: pointer; margin-right: 74% } .astext { text-align: left; margin-le ...

htmlcss

Styling Options for Material-UI Tables: Enhancing the Look of Your Table Components

I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...

htmlcssmaterial-ui

Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side. <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' r ...

htmlcss

Tips for preventing child elements from becoming distorted when the parent element is resized

How can I prevent rotated child elements from skewing when the parent element is scaled? Here is the code snippet that I am working with: <svg viewbox="0 0 500 500"> <g class="parent" transform="matrix(1.71341 0 0 1 -42.302 0)"> <path ...

javascripthtmlmatrixsvg

Display Image Automatically Upon Page Opening

Currently, I have an HTML file that includes the following code: <img src="(Image from file)" alt="Raised Image" class="img-raised rounded img-fluid"> I am attempting to retrieve the image from a file when the webpage loads using the server.js file ...

javascripthtmlnode.js

I encountered an error stating "loadmodel is not defined" while I was using PHP and a JavaScript file with the type=module

Recently, I ventured into the world of THREE.js and WebGL, trying to load car models. My goal was to trigger a custom function through an onclick event listener that would extract an address from a data- attribute and pass it on to another custom function ...

javascripthtmlecmascript-6three.jswebgl

Leveraging the Bootstrap 3 audio player, although displaying a standard HTML5 output

When trying to use the Bootstrap 3 player to display an audio player, I'm encountering an issue where the page only shows a default black HTML5 audio player output. Here is my current directory structure: miuse/ application/ bootstrap/ ...

phphtmlcodeigniteraudiotwitter-bootstrap-3

Contrast between using sendFile('/index.html') versus render('index') with Jade

As a newcomer to JS, I recently stumbled upon a similar question but with a different perspective. So my inquiry is: What are the advantages of using a Jade template in Express over simply sending raw HTML as a response? In other words, why would one choos ...

htmlnode.jstemplatesexpresspug

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

htmlcssmargin

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

Troubleshooting Problem with Responsive Layout and Embedded YouTube Video

Before I dive into this, I want to acknowledge that I understand my coding practices for this project are not up to par. I have been under time constraints to finish this project quickly (as a favor) and plan to address these issues at a later time. On my ...

phphtmlcssyoutuberesponsive-design

When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If ...

javascriptjqueryhtmlcss

Personalizing the hamburger icon in Bootstrap 4.0

I want to modify the color of the three lines as well as the border around the icon using CSS, but I'm unsure which tags to target. CSS: .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=& ...

csshtmlbootstrap-4

Comparison between Static HTML controls and Razor HTML helpers.Static HTML controls are

Just starting to learn ASP.NET MVC and I've noticed that it generates controls like @Html.TextBoxFor(x => x.Name) which resemble server-side controls in web forms. Since browsers only understand HTML, these controls need to be converted to HTML bef ...

c#asp.netasp.net-mvchtmlrazor

Guide to changing the size of an image window in CSS when the container's width falls below a specific threshold

I am struggling with a dilemma regarding an image that is 1920 pixels wide. My goal is to have it displayed centered and cropped in the browser window when its width exceeds 1024 pixels. In case the browser width is below 1024 pixels, I want the image to b ...

htmlcssimage

Modifying CSS Styles using JQuery

I've been attempting to use JQuery to change a CSS property without success, despite trying multiple solutions found on SO. Here's what I've attempted (with numberHours being a previously defined variable): $(".cd-schedule .events .top-inf ...

jquerycss

What is the best way to add padding between form elements in Bootstrap 4?

Is there a way to add space between form elements in Bootstrap 4? The code snippet below shows an example where the full name has spacing from '@' but the username does not have any. Any suggestions on how to fix this? <form class="form-inlin ...

htmlcssbootstrap-4