Hello everyone,
I could use some assistance in identifying where I may have made errors. Can you please help me with that?
I am aiming to enhance the responsiveness of the following design for mobile devices.
<section class="hero">
<div class="row">
<div class="col-8 sm-8" id="tennis-pic"><img src="assets/images/home-hero.jpg" class="home-hero"
alt="Image of a tennis player receiving coaching on court"></div>
<div class="col-4 sm-4 blue-box">
<h3 class="welcome">Welcome to Go Tennis System</h3>
<p class="tips">Your go-to hub for Tips, Tricks, Training and everything Tennis</p>
</div>
</div>
</section>
<article>
<div class="why-header">
<h4>Reasons to opt for our Go Tennis System service</h4>
</div>
<p class="why-text">
Our service is tailored exclusively for you. We operate digitally and at your convenience.
By using our service, we request a small donation which will be shared with a dog charity and animal rescue organization
as part of our commitment to giving back.
You have the opportunity to upload videos for coaching, tips, and receive honest constructive feedback, enabling you to maintain a video diary and enhance your skills.
When we say we play the same game but simpler, we mean it's customized to your pace and schedule. We cater to all age groups and skill levels, so if you're a beginner aspiring to play like a professional, come and give us a try. You won't regret it.
</p>
</article>
Below is the CSS I'm utilizing:
/* ------------------------------------------- Home Hero Image */
.hero {
margin-top: 100px;
margin-bottom: 150px;
}
.home-hero {
position: relative;
max-width: 110%;
width: auto;
height: auto;
padding: 0;
margin: 0;
}
/* ------------------------------------------- Home Welcome Box */
.blue-box {
position: relative;
padding: 0;
margin: 0;
background: #2a5490;
}
.welcome {
font-family: Montserrat, sans-serif;
font-weight: 400;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 45%;
margin-right: 10%;
margin-left: 10%;
top: 60px;
right: auto;
height: auto;
width: auto;
text-align: center;
color: #fff;
}
.tips {
font-family: Montserrat, sans-serif;
font-weight: 300;
float: right;
position: relative;
margin-left: auto;
margin-right: auto;
margin-right: 10%;
margin-left: 10%;
top: 60px;
right: auto;
height: auto;
width: auto;
text-align: center;
color: #fff;
}
Thank you in anticipation of your help.
Warm regards
Andrew
The website I am currently working on can be found here