Навбар моего сайта на мобильном телефоне расширяется вправо:
Снимок экрана: https://prnt.sc/qsze7o - navbar https://prnt.sc/qszeer - нижний колонтитул
Я обновил свой CSS следующим кодом, чтобы он стал отзывчивым:
html{overflow-x:hidden;}
body{overflow-x:hidden;}
Он работает и исправляет панель навигации для мобильных устройств, но скрывает первый ряд нижний колонтитул, как показано ниже. Пожалуйста, предложите любое решение.
Снимок экрана после https://prnt.sc/qszelc - navbar https://prnt.sc/qszeow - нижний колонтитул
Заголовок. js
<HeaderWrapper>
<div className="container-fluid">
<div className="row">
<div className="col-md-2">
<Link to="/">
<img src={tangoLogo} alt={site.siteMetadata.title} />
</Link>
</div>
<div className="col-md-10 menu">
<Navigation menu={menu} />
</div>
</div>
</div>
</HeaderWrapper>
HeaderStyles. js
import styled from 'styled-components';
export const HeaderWrapper = styled.header`
background: #fff;
margin-bottom: 1.45rem;
height: 110px;
border-bottom: 1px solid #e7e7e7;
display: flex;
align-items: center;
position: fixed;
z-index: 999;
width: 100%;
-webkit-box-shadow: 0 5px 4px -6px #999;
-moz-box-shadow: 0 5px 4px -6px #999;
box-shadow: 0 7px 4px -8px #999;
@media (min-width: 1200px) {
img {
margin:170px!important;
}
}
img {
max-width: 185px;
margin: 0;
padding: 12px 0 0 0;
}
.menu {
display: flex;
align-items: center;
}
`;
Выше приведен код для раздела заголовка.
Нижний колонтитул. js
<div className="row">
<div className="col-md-4"
data-sal="slide-left"
data-sal-delay="300"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>PROFESSIONAL ASSISTANCE</h3>
<p className="expat-contact">Expat Guide Turkey is entity working under structure of ATA Institutional Consultancy. <br/><br/>Expat Guide Turkey is a consultancy firm offering umbrella company services and services on immigration issues including work and residence permit, company formation and property management for foreigners in Turkey. Behind its success, Ata Institutional Consultancy’s efficiency and customer oriented management style plays a very important role. </p>
</div>
<div className="col-md-1"><br/></div>
<div className="col-md-7"
data-sal="slide-left"
data-sal-delay="400"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>GET IN TOUCH</h3>
<form
name="contact"
method="POST"
action="/success/"
data-netlify="true"
data-netlify-honeypot="bot-field"
class="needs-validation"
novalidate netlify
>
<div className="half left cf">
<input type="hidden" name="form-name" value="contact" />
<input type="text" name="name" id="input-name" class="form-control" placeholder="Your Name" required />
<input type="email" name="email" id="input-email" class="form-control" placeholder="Email address" title="Email (format: your@example.com)" required />
<div className="invalid-feedback">
Please enter a valid email address.
</div>
<input id="phonenum" type="tel" class="form-control" pattern="^\d{4}-\d{3}-\d{4}$" placeholder="Phone Number (xxxx-xxx-xxxx)" title="Phone (format: xxxx-xxx-xxxx)" required />
</div>
<div className="half right cf">
<textarea name="message" id="input-message" rows="4" class="form-control" placeholder="Message"></textarea>
</div>
<div netlify-recaptcha></div>
<input
type='submit' id="input-submit" class="btn btn-primary btn-lg btn-block" value="Send Message"
/>
</form>
</div>
</div>
</div>
FooterStyles. js
import styled from 'styled-components';
export const FooterWrapper = styled.footer`
background: #f3f3f3;
color: #4c4c4c;
text-align: left;
padding: 40px 0 10px 0;
h1 {
font-family: 'Raleway', Arial;
color: #4c4c4c;
text-align: left;
font-size: 25px;
margin-left: 0px;
}
h3 {
font-family: 'Raleway', Arial;
font-size: 16px;
margin-top: 5px;
font-weight: 700;
margin-bottom: 10px;
line-height: 0.9rem;
}
h6 {
font-family: 'Times New Roman';
font-size: 28px;
color: #fff;
font-style: italic;
margin: 40px 20% 20px 20%;
line-height: 35px;
}
h6:before{
content: "";
background: #d22e;
width: 40px;
height: 4px;
position: absolute;
bottom: 10px;
}
a {
text-decoration: none;
color: #d22e;
font-weight: 200;
font-family: Arial, Helvetica, sans-serif;
}
.icon_social {
text-decoration: none;
display: inline-block;
margin: 0.6rem 1.2rem 1rem 0;
opacity: 0.5;
width: 1.4rem;
height: 1.4rem;
}
.social {
text-align: left;
display: block;
margin: 5px 0px;
}
.social img {
width: 1.2rem;
height: auto;
margin: 0 5px 0 0;
position: relative;
align-items: left;
opacity: 0.5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
filter: invert(60%) sepia(33%) saturate(2000%) hue-rotate(322deg) brightness(100%) contrast(120%);
}
.expat-contact {
font-size: 12px;
font-weight: 400;
font-family: Raleway, Arial;
line-height: 1.2rem;
}
.expat-heading {
font-size: 25px;
font-family: Raleway, Arial;
line-height: 1rem;
text-align: left;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
}
.expat-heading:before{
content: "";
background: #d22e;
width: 40px;
height: 4px;
position: absolute;
bottom: 6px;
}
.social img:hover {
opacity: 0.9;
cursor: pointer;
}
.linkedin {
margin-right: 5px;
filter: invert(36%) sepia(73%) saturate(2157%) hue-rotate(344deg) brightness(77%) contrast(99%);
-webkit-filter:invert(60%);
}
.facebook {
margin-left: 5px;
filter: invert(60%);
-webkit-filter:invert(60%);
}
.instagram {
margin-left: 5px;
filter: invert(60%);
-webkit-filter:invert(60%);
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-top-gray { border-top-color: #adb5bd; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-condensed { line-height: 1.25; }
`;
Над строкой в нижнем колонтитуле скрывается в мобильном представлении, если я использую html, тело {overflow-x: hidden} в моем макете. css