Problem with mobile pages where left side of pages are slightly cut off/obscured

**judgedredd** · 05-29-2018, 07:53 PM

I have used Bootstrap v4.0.0-alpha.2 on a site I created for a client here: http://masonracetiming.com

For all versions of the site larger than 900px wide the site displays correctly. But on smaller viewports such as mobile phones the left side of the page gets very slightly cut off although the actual text is visible. You can see a small part of the left hand side of the header image cut off (part of the left leg of the 'M' is cut off). Not a big deal but it is bugging the hell out of me and I have been trying to find out why this is happening for nearly a month now.

Here is the index.php page code which is just about the same for all the other pages:

PHP Code:


         <?php
        header ("Cache-Control: max-age=200 ");
        ?>
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <?php include("metatags.php"); ?>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <title>Mason Race Timing - Welcome!</title>
            <!-- ADD CUSTOM STYLESHEETS HERE -->
            <!-- END CUSTOM STYLESHEETS -->
            <?php include("stylesheets.php"); ?>
        </head>
            <body>
                <div class="container tm-container">
                    <div class="row navbar-row"> 
                    <?php include("topmenu.php"); ?>
                    </div>           
                    <div class="tm-page-content">                
                        <!-- #home -->
                        <section class="row tm-section">
                            <div class="tm-white-curve-left col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-6">
                                <div class="tm-white-curve-left-rec"></div>
                                <div class="tm-white-curve-left-circle"></div>
                                <div class="tm-white-curve-text">
                             <?php include("content/content-index.php"); ?>                                   
                               </div>                      
                            </div>
                            <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6">
                                <img src="img/runners-fp.jpg" class="img-fluid tm-img" alt="Sunset runners" />
                            </div>
                        </section> <!-- #home -->
                        <!-- footer -->
                        <footer class="row tm-footer">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                <p class="text-xs-center tm-footer-text"><?php include("footer2.php"); ?></p>
                            </div>
                        </footer>                      
                    </div>
                </div> <!-- .container -->
                <?php include("scripts.php"); ?>
                <?php include("additionalscripts.php"); ?>
            </body>
            </html>

There are three style sheets including the bootstrap style sheet given above. One of these only deals with fonts which I won't post. The next post gives the style.css code or you can go here to get the entire file (am having trouble posting the entire file as its 19000 + characters which is over the limit here): http://masonracetiming.com/css/style.css

**judgedredd** · 05-29-2018, 07:55 PM

style.css

Code:

@charset "utf-8";
/* CSS Document */
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

a { transition: all 0.3s ease; }
button:focus { outline: none; }
a:hover,
a:focus { text-decoration: none; outline: none; }
ul, h1 { padding: 0; margin: 0; }

html { 
font-size: 1em; 
background: #eb6300; 
}
/* distance between the sides of the browser window and the edge of the content container */
body {
    background: #eb6300;
    color: rgba(255,255,255,0.95);    
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    padding-left: 100px;
    padding-right: 100px;
    /*overflow-x: hidden;*/
}
#body-services-results-faq { /* SETS THE TEXT TO BLACK FOR THE WHOLE PAGE */
    background: #eb6300;
    color: rgba(0,0,0,0.95);    /* rgba used for opacity of text */
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    padding-left: 100px;
    padding-right: 100px;
    /* overflow-x: hidden;*/
}
/*---ADD ADDITION---*/
#header-image {
width: 100%;
/* margin: auto; removed 7 May */
padding: 0 0 1px 0;
}
/*---END ADDITION---*/
p { 
line-height: 1.5; 
}
#faq-line-height {
line-height: 1.1em;
}
#p-title { /*services page */
font-weight: 600;    
}
p:last-child { 
margin-bottom: 0; 
}
.tm-img {
padding: 10px 0px 0px 20px; 
}
.tm-footer-text {
    font-size: 0.9em;
    margin-bottom: 0;
    padding: 0px 15px;
}
.tm-container { 
    background-color: #940C00; 
    /* padding for the actual top of the page and the window of the browser - 7 May '18 - originally 0px 17px */
    /* When the 17 is put to 0 the sides of the dark red become narrower  causing the header and nav bar to stick out either side */
    padding: 0 17px;
    max-width: 3000px;
}
/*-- START OF NAVIGATIONBAR --*/
.navbar-row {
position: relative;
}
.navbar-container {
    background-color: #000000; 
    font-size: 1em;
    position: absolute; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
            /* Originally 40px on next line */
    padding: 40px;
    z-index: 1000;
}
.navbar {
    color: white;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0;        
}
.navbar-container.sticky {
    /* This gives the transparency of the bar when it pops into view across the whole page */
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    /* The following line determines how far from the edge of the browser window the navbar is */
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    /* Determines how big the font is when it pops out */
    font-size: 1em;
    /*padding: 1em 2em; old values */
    /* The following line moves the up arrow globe left or right when it is in popped out position */
    padding: 0em;
}
.navbar-container.sticky .navbar-brand {
    /* Determines the height of the navbar when it pops into view when scrolled up */
    padding: 0;
}
/*-- Nav Bar Brand is the globe on the left in the pop out nav bar --*/
.navbar-brand {
    background: #000000;
    /* color: white; - original*/
    /*display: inline-block; - original*/
    /* font-size: 0.7em; - original*/
    margin: 0;
    /* text-transform: uppercase; - original*/
    /* padding: 0.56em 1.3em; - original*/
    padding: 0.56em 1.3em;
    /* border: 1px solid white; - original*/
    border: none;
}
.navbar-brand:hover,
.navbar-brand:focus {
    /* color: white; */
}
.nav-item {
    float: left;
    list-style: none;
}
.navbar-nav .nav-link,
.navbar-nav .nav-link:focus {
    color: white;
    display: block;
    font-size: 1em;
    /* font boldness of the text in the navbar */
    font-weight: 400;
    /* padding: 0.625em 1.43em; original */
    padding: 0em;
    transition: all 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: #5B0000;
    /* color: white; */
    text-decoration: none;
}
/*-- END OF NAVIGATION BAR --*/
/*---ADD ADDITION---*/
#radius-results {
/*background: #FDDEAC;*/
border: 1px solid white;
/* padding was set to 20px but this caused problems on mobiles in that the right edge of the table went outside the conatiner */
/* The third number has to be set to the same as the radius to prevent  the results area from hiding the radius at the bottom two corners */
padding: 0 0 50px 0;
/* Without the margin being set to auto the table spans the entire page*/
margin: auto;
border-radius: 50px 50px 50px 50px;
z-index:1000;
}
#pdfresults {
float: left;    
margin: 20px 10px 0px 20px;    
}
#raceheadersmall {
font-size: 0.7em;
margin: -7px 0px 0px;   
float: left; 
}
#legend {
font-weight:500;
font-size: 0.8em;
text-align: right;
padding: 0px 0px;
float: left;    
}
#racetitle {
font-weight:600;
font-size: 1.15em;
text-align: center;
padding: 0px 0px 10px;
}
th {
font-size: 1em; 
}
#resultsheader {
font-weight: bold;
text-align: left;
padding: 0 0;
border-collapse: separate;
border-spacing: 0px 15px; 
}
/* THIS SETS THE TABLE WIDTH ON ALL DEVICES */
table {
width: 100%; 
/* taken out these two lines
padding: 0px 15px;
margin: auto; on May 7th 18*/ 
}
#results {
/*--If set to 100% the tabel goes right across the container div --*/    
width: auto;
height: 1.1em;
/* Sets distance between data inside table */
padding: 0px 15px;
/* Originally font-size: 1em; */ 
font-size: 1em;
}
/*--To make the lines in the results table alternate between two colors. Even is line 2, 4, 6 etc.--*/
tr:nth-child(odd) {background: #000000}
tr:nth-child(even) {background: #940C00}
#copyright {
text-align: center;
font-size: 0.7em;
color: white; 
}
#alignment {
margin: auto;
}
/*----END ADDITION----*/
.tm-page-content {
margin-top: 255px;
}
.tm-home-right {
    padding: 100px 70px 100px 25px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.tm-section3 {
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the text area */
    height: 400px;      
}
.tm-section2 {
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the text area */
    height: 350px;      
}
.tm-section1 {
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the text area */
    height: 900px;      
}
.tm-section-faq {
    line-height: 1em;
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the area between bottom of nav bar and bottom of page - originally set to 600px*/
    height: 950px;    
}
.tm-section-services {
    line-height: 1em;
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the area between bottom of nav bar and bottom of page - originally set to 600px*/
    height: 1250px;    
}
.tm-section-results {
    line-height: 1em;
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the area between bottom of nav bar and bottom of page - originally set to 600px*/
    height: 1650px;
}    
.tm-section {
    background-position: bottom right;
    background-size: cover;
    background-repeat: no-repeat;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /*sets the height of the area between bottom of nav bar and bottom of page - originally set to 600px*/
    height: 500px;    
}
#tm-section-1 {    background: #940c00; }
#tm-section-2 {    background: #940c00; }
#tm-section-3 {    background: #940c00; }
#tm-section-4 {    background: #940c00; }
#footer-topspace {
height: 15px;    
}
.tm-footer { 
    height: 1.58em;
    background: #000000;
    font-weight: 300;
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;    
}
.tm-white-curve-left,
.tm-white-curve-right {
    color: black;
    margin-top: 30px;
    margin-bottom: 30px;
}

Con't on next post.. (may be a while before it appears as it is being moderated)

Thread: Problem with mobile pages where left side of pages are slightly cut off/obscured

Thread Tools

Search Thread

Display

Problem with mobile pages where left side of pages are slightly cut off/obscured

Posting Permissions