The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> iphone image problem
malc mabe
post Oct 21 2019, 03:17 PM
Post #1





Group: Members
Posts: 3
Joined: 21-October 19
Member No.: 27,021



hello

i have just started putting a site together for a friend, and am having a little bit of a problem, i hope someone can help with.

this is the address: http://www.thesmallbusinessnetwork.net/pro...lpwc/index.html

this is the problem.

when resizing smaller, the main image moves of to the left. is there anyway of avoiding this, so the image stays dead central?

if not, this is not to bad in a normal browser, but when i look at it on an iphone, the image gets completely distorted. it looks like it has been zoomed in when viewed.

through trial and error, i have discovered this has be caused by the html code i have put <!--about us --> code downwards.

if i delete this code, it looks a lot better, though still moved off to the left.

i really can't see what's going on, so i hope you can help.

here is my code:

html:[b]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Reliable & Trustworthy North West Plumbers, Lancashire Plumbebers, Manchester Plumbers, Cheshire Plumbers, Central Heating Repair & Installation, Planned & Emergency Call Out, No Hidden Fees or Call Out Charges, Call Now for a Quote. Manchester Plumbers,Stockport Plumbers Call 07533564588 Local Plumbers We Care Manchester Based Company Caring for Our Customers now and in the future years to come, Established over 11 years offering Free Quotes & from Boiler Installation to Plumbing in Your new toilet there is nothing we can't do at Affordable Prices">
<meta name="keywords" content="Plumbers, No Call Out Charge, emergency call out, central heating"/>
<title>Local Plumbers We Care</title>
<!-- Bootstrap -->
<link href="../../../css/bootstrap-4.3.1.css" rel="stylesheet">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap" rel="stylesheet">
<!--Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">

<!--Other CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="320">
<!-- body code goes here -->
<section id="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <a href="" class="navbar-brand"><i class="fas fa-wrench fa-2x mr-2"></i><span class="local">Local </span><span class="plumbers">Plumbers </span> <span class="goblue"> We Care</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#sec1" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#sec2" class="nav-link">About Us</a></li>
<li class="nav-item"><a href="#sec3" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#sec4" class="nav-link">Our Team</a></li>
<li class="nav-item"><a href="" class="nav-link">Contact Us</a></li>
</ul>
</div>
</nav>
</section>
<div class="safe" id="#sec1">
<div class="row justify-content-center">
<div class="col-md-12 py-1 pl-2">
<h1>Your'e In safe hands</h1>
<p>with local plumbers we care</p>
</div>
<div class="col-md-12 py-1 pl-2 ">
<h1><span class="goblue">Call Now:</span></h1>
<h1>07533 564588</h1>
</div>
</div>
</div>

<!--Fixed Image -->

<div class="landing">
<div class="home-wrap" id="sec1">
<div class="home-inner image-fluid"> </div>
</div>
</div>

<!--About Us-->

<div>
<div class="container-fluid callToday text-center d-none d-lg-block ">
<h1 ><i class="fas fa-mobile-alt mr-2"></i>Call 07533 564588 Today </h1>
</div>
</div>
<section id="aboutus">
<div id="sec2" class="container-fluid aboutus">
<h1 class="text-center d-md-none">About Us</h1>
<h1 class="text-center d-none d-md-block">About Local Plumbers We Care</h1>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-4 aboutus">
<p > Local Plumbers We Care A Local Family Run Manchester & Stockport Plumbing & Heating
Company</p>
<p> We Pride Ourselves
On our Expert Workmanship and Experience in the Plumbing and Heating Industry</p>
<p> We Are a Gas Safe Company And With Over 15 Years Experience in The Industry</p>
<p> We Take Pride In Our Reputation Of Becoming Manchester & Stockport's No.1 Plumbing And Heating Company</p>
</div>
<div class="col-lg-4 text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="640" height="390" src="https://www.youtube.com/embed/HF3W4gsj0pA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container aboutus text-center">
<h3>Because we are a small family business, we can offer a fantastic personal service that bigger companies cannot match.</h3>
</div>
</div>
</section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../../js/jquery-3.3.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../../js/popper.min.js"></script>
<script src="../../../js/bootstrap-4.3.1.js"></script>
</body>
</html>


[/u]css[b]

@charset "utf-8";
/* CSS Document */

body{
overflow-x: hidden;
font-family: 'Quicksand', sans-serif;
}

/*Header Section*/

.plumbers{
font-size: 1.5rem;
text-transform: uppercase;
}

.local
{
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;

}

.goblue{
text-transform: uppercase;
color:blue;
font-size: 1.5rem;
font-weight: 700;
}



.navbar-light .navbar-nav .nav-link {
color: #1306F2;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 0.2rem;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover


{
font-weight: 700;
color: blue;
}

.safe{
background-color:#0C0C20;
color: white;
margin-top: 65px;
padding-top: 0.3rem;
opacity:0.5;
position: absolute;
top:15%;
left:55%;
z-index: 1;
width: 40%;






}

.safe h1{

text-transform: uppercase;
font-size: 1.8rem;
padding-left: 2rem;


}

.safe p{
padding-left: 2rem;
}

.navbar
{
margin-bottom: 30px;

}





/*End Of Header Section */



/*Call Today*/

.callToday{
background-color:rgba(78, 139 , 234 ,1.00);
color: white;

}

.callToday h1{
color:white;
letter-spacing: 1rem;
font-size: 1.8rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-transform: uppercase;

}

/* Fixed Image*/

.home-inner{

background-image: url("images/intropicture.jpg");
height:1000px;
background-attachment: fixed;
background-position:center top ;
background-repeat: no-repeat;
position: relative;
background-size: cover;
margin-bottom: 2rem ;
max-width: 100%;
min-width: 100%;



}

#aboutus{
background-color: #D2D2D2;
}
.aboutus{
margin-top: 2em;
}

.aboutus h1{
color: blue;
letter-spacing: 0.5rem;
font-size: 1.8rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-transform: uppercase;
font-weight: 700;
}

.aboutus p{
text-transform:capitalize;
font-size: 1.2rem;
font-weight: 700;
}

.aboutus h3
{
color: blue;
letter-spacing: 0.5rem;
font-size: 1.2rem;
padding-top: 1rem;
padding-bottom: 1rem;
text-transform: uppercase;
font-weight: 700;
}




/*fixes for mobiles*/

/*--- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
margin-left: 0px!important;
margin-right: 0px!important;
}

/*--- Fix for Fixed Navbar jumping on scroll --*/
.fixed-top {
-webkit-backface-visibility: hidden;
}

/*--- Fixed Landing Page Section --*/
.landing {
position: relative;
width: 100%;
height: 100vh;
display: table;
z-index: -1;
margin-bottom: 0.2rem;
}
.home-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*--- iOS Fixed Background Image --*/

.fixed-background {
position: relative;
width: 100%;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -999!important;
}
.fixed {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
malc mabe
post Oct 21 2019, 04:39 PM
Post #2





Group: Members
Posts: 3
Joined: 21-October 19
Member No.: 27,021



now working. thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th November 2019 - 06:07 AM