#html #css #twitter-bootstrap #bootstrap-4
#HTML #css #twitter-bootstrap #bootstrap-4
Вопрос:
Я работал над сайтом, и мои кнопки CTA отлично выглядят на компьютерах, но на мобильных устройствах они становятся градиентными. Я не могу воспроизвести ошибку градиента с помощью devtools.
Я перепробовал все, что мог придумать, чтобы попытаться воспроизвести это. У меня нет идей.
Я новичок в программировании, поэтому мой код немного неаккуратный. Пожалуйста, простите меня. Я добавил код в codepen здесь: https://codepen.io/rob-connolly/pen/JjXQJgq
живой сайт, где вы можете увидеть ошибку на мобильном устройстве: https://grobconnolly.github.io/cloverweb /
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
font-family: "Montserrat", sans-serif;
color: #636468;
font-weight: 300;
}
.service-5 h1,
.service-5 h2,
.service-5 h3,
.service-5 h4,
.service-5 h5,
.service-5 h6 {
color: #3e4555;
}
.service-5 a {
text-decoration: none;
}
.service-5 .linking {
color: #3e4555;
}
.service-5 .linking:hover {
color: #316ce8;
}
.service-5 .font-weight-medium {
font-weight: 500;
}
.service-5 .bg-light {
background-color: #f4f8fa !important;
}
.service-5 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.service-5 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.service-5 .wrap-service5-box .card-body {
padding: 30px;
}
.service-5 .wrap-service5-box .text-success-gradiant {
background: #f47820;
background: -webkit-linear-gradient(legacy-direction(to right), #f47820 0%, #f47820 100%);
background: -webkit-gradient(linear, left top, right top, from(#f47820), to(#f47820));
background: -webkit-linear-gradient(left, #f47820 0%, #f47820 100%);
background: -o-linear-gradient(left, #f47820 0%, #f47820 100%);
background: linear-gradient(to right, #f47820 0%, #f47820 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.service-5 .wrap-service5-box .icon-size {
font-size: 45px;
}
.service-5 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
#textWhite {
color: white;
font-size: 25px;
}
.featureSection {
margin-top: 30px;
}
.ourFeatures {
margin-bottom: 50px;
}
* {
font-family: "Montserrat", sans-serif;
color: #636468;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-bottom: .3%;
}
#subHeroText {
font-size: 40px;
font-weight: 400;
color: #6b7175;
margin-top: 0px;
}
#setupText {
font-size: 22px;
color: rgb(107, 113, 117);
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 25px;
}
#cancelAnytime {
font-size: 22px;
color: rgb(107, 113, 117);
padding-bottom: 1em;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.footer {
padding: 30px 0;
background: #eee !important;
width: 100%
}
.priceText {
font-size: 15px;
font-weight: 100;
}
.secondSection {
background-color: white;
width: 100%;
}
.extraPad {
padding-bottom: 4%;
}
.question1 {
border: 1px solid black;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
padding-top: 3%;
}
.dollarSymbol,
.mo,
.amount {
padding-bottom: 4%;
}
#extraSpace {
padding-left: 100px;
padding-right: 100px;
}
.dollarSymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
.faq {
padding-top: 20px;
padding-bottom: 20px;
}
#priceIcons {
padding-left: 20%;
}
.iconFeatures {
padding-left: 0%;
}
.iconTextPrice {
padding-left: 3%;
font-size: 14px;
font-weight: 200;
padding-top: 1%;
}
.iconUs {
left: 27%;
padding-top: 3%;
padding-bottom: 4%;
}
.textIcon {
color: black;
font-weight: 200;
}
#heroButtonPricing {
font-size: 20px;
width: 300px;
}
li {
font-size: 12px;
justify-content: left;
}
.heroBottom {
background-color: white;
}
.heroSection {
background-color: #F8FBFC;
}
.liRight {
text-align: left;
margin-left: 3em;
}
.navbar {
background-color: #F8FBFC;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.subHeroTextBottom {
font-size: 12px;
color: rgb(107, 113, 117);
padding-top: 1px;
}
.mainSubjects {
font-weight: 400;
font-size: 28px;
padding-top: 1em;
padding-bottom: .2em;
}
.mainSubjectsWhy {
font-weight: 400;
font-size: 28px;
padding-top: 2em;
padding-bottom: .2em;
}
.mainSubjectsFaq {
font-weight: 400;
font-size: 28px;
padding-top: 8em;
padding-bottom: .2em;
}
.subjectHeader {
font-weight: 400;
font-weight: 100;
font-size: 18px;
padding-top: 0;
padding-bottom: .2em;
}
.readyToSignUp {
font-weight: 100;
font-size: 18px;
padding-top: 0;
margin-bottom: .1em;
}
.secondSubject {
padding-top: 15px;
}
.thirdTitle {
padding-top: 15px
}
.calButton {
padding-top: 400px;
}
.featureIconLeft1 {
left: 10%;
}
.featureTextLeft1 {
left: 6%;
}
.featureIconRight2 {
left: 5%;
}
.featureTextRight2 {
left: 1%;
}
.robpic {
width: 200px;
}
.name {
font-size: 10px;
padding-bottom: 0;
margin-bottom: 0px;
}
.title {
font-size: 8px;
padding-bottom: 2em;
}
.sectionSpace {
margin-top: 0px;
padding-top: 1.2em;
}
.backGround {
background-color: #F8FBFC;
width: 100%;
}
.tjFooterLogo {
max-width: 100px
}
#noBorder {
border: none;
width: 30%;
padding-top: 3%;
padding-bottom: 4%;
background-color: #F8FBFC;
}
.footerText {
font-size: 12px;
padding-bottom: .5em;
}
.fullWidth {
margin-right: 0px;
margin-left: 0px;
padding-right: 0px;
padding-left: 0px;
}
.footerLogo {
width: 50%;
padding-top: 8%;
padding-bottom: 4%;
}
.footerTextCopy {
font-style: normal;
color: rgb(107, 113, 117);
font-size: 10px;
}
.name {
font-size: 18px;
font-weight: 200;
}
.title {
font-size: 14px;
font-weight: 400;
}
@media only screen and (min-width: 980px) {
.mainSubjects,
.mainSubjectsWhy {
font-size: 32px;
}
.subjectContent {
font-size: 22px;
}
}
@media only screen and (min-width: 1224px) {
.heroText {
font-size: 64px;
padding-top: 4%;
padding-left: 20%;
padding-right: 20%;
}
.subHeroText {
font-size: 20px;
word-spacing: .2em;
}
.btn-primary {
width: 150px;
}
.mainSubjects {
font-size: 40px;
font-weight: 900;
}
.subjectContent {
font-size: 20px;
}
.name {
font-size: 20px;
font-weight: 400;
}
.title {
font-size: 15px;
font-weight: 200;
}
.footerLogo {
width: 20%;
margin-top: 0;
padding-top: 2em;
padding-bottom: 10px;
}
.footerText {
font-size: 15px;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;900amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT WB0QEEqLprO NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="./index.html" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">How it Works</a>
<a href="https://support.textjet.com/en/" class="nav-item nav-link">FAQ</a>
<a href="#pricingSection" class="nav-item nav-link">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#pricingSection" class="nav-item nav-link">Sign Up</a>
<a href="https://app.textjet.com/app/login" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
<div class="container-flex heroSection">
<div class="row">
<div class="col-12">
<h1 class='heroText text-center'>Powerful loyalty software for small businesses!
</h1>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h2 id="subHeroText">Now available on Clover Networks!
</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" type="button" class="btn btn-success">Sign Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.</div>
</div>
<img class="img-fluid" src="./assets/images/hero-image.png" alt="TextJet Hero images">
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
</div>
</div>
<div class="container secondSection">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Powerful Loyalty</h3>
<p class="subjectContent">Streamline your loyalty platform to maximize your reach. TextJet helps you turn occasional customers into loyal fans. We have spent countless hours designed and developing a system that will give you the upper hand over your competition. Not sure
if TextJet is right for you... schedule a demo and find out why hundreds of businesses rely on TextJet. </p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer1.png" alt="Happy Customer">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer2.png" alt="Happy Customer">
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Marketing Autopilot</h3>
<p class="subjectContent">We know running a business can be time restraining. With TextJet Marketing Autopilot we provide a powerful marketing suite without little to no effort on your part! After you set-up your account with one of our Customer Support Representatives,
everything will be in place for you to see results with TextJet! </p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<h3 class="mainSubjects">Retention Plus</h3>
<p class="subjectContent">TextJet retention plus is a really cool tool we built to help you keep your customers coming back. Let's pretend Suzy comes into your store today, but you don't see her for 30 days. TextJet retention starts to go to work for you. Our tools help
entice Suzy to come back to your store. It's really an amazing tool for your business!
</p>
</div>
<div class="col-xs-12 col-sm-6">
<img class="img-fluid" src="./assets/images/happy-customer3.png" alt="Happy Customer">
</div>
</div>
</div>
<!-- Features-->
<div class="bg-light py-5 service-5 featureSection">
<div class="container">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-12 text-center">
<p class="mainSubjects ourFeatures">Our Features</p>
</div>
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-comment"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Rich
Messaging</a></h6>
<p class="mt-3">Send beautiful images or videos directly to your customers' cell phones.
</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="fab fa-medapps"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Retention
Plus</a></h6>
<p class="mt-3">TextJet tracks how long it's been since a customer has been to your store. We set-up triggers to bring them back to your store. </p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-paper-plane"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Handsfree
Marketing</a></h6>
<p class="mt-3">TextJet is an easy to use marketing solution built for small businesses. It takes about 4 minutes to set-up and your account will be ready to go.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-chart-bar"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Analytics amp;
Tracking
</a></h6>
<p class="mt-3">We have reporting in place so you can see how your account is performing. We want you to see the value of TextJet!</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-object-group"></i>
</div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">2-Way
Messaging</a></h6>
<p class="mt-3">You can have a 2-way conversation with your customers using TextJet. This is a great customer service tool.</p>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- Column -->
<div class="col-md-4 wrap-service5-box">
<div class="card card-shadow border-0 mb-4">
<div class="card-body d-flex">
<div class="mr-4 mb-2 text-success-gradiant icon-size"><i class="far fa-gem"></i></div>
<div class="">
<h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">SmartPulse
(coming soon)</a></h6>
<p class="mt-3">Find out how your customers feel about your store. Resolve issues and keep your customers happy</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in minutes. </h3>
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" type="button" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment. Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Features-->
<!-- Pricing -->
<div class="container-flex sectionSpace bg-white">
<div class="row">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<a id="pricingSection"></a>
<h1 class="mainSubjects">Pricing</h1>
<p class="subHeroText">Our plans are designed to grow with you! No contracts, no set-up fees, and awesome customer support is included in all packages. </p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Starter Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$1 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">50 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Business Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$39 <small class="text-muted">/
mo</small></h1>
<ul class="list-und mt-3 mb-4 priceText">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">1000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
started</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro Plan</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$89 <small class="text-muted">/
mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li class="priceText">Points Rewards</li>
<li class="priceText">Custom Branding</li>
<li class="priceText">Handsfree Markting</li>
<li class="priceText">Fraud Protection</li>
<li class="priceText">Promo Text Messaging</li>
<li class="priceText">2-way Messaging</li>
<li class="priceText">Reporting</li>
<li class="priceText">5000 SMS/ Month</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get
Started</button>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="mainSubjects text-center">Ready to see the TextJet difference?</h4>
<p class='subHeroText text-center'>We are here to help you grow your business!
</h2>
<div class="row">
<div class="col-12 text-center">
<div id="setupText">Get set-up in 15 minutes.
</div>
<div class="row">
<div class="col-12 text-center">
<a href="#pricingSection" id="heroButton" type="button" class="btn btn-primary">Sign
Up</a>
<div class="row">
<div id="cancelAnytime" class="col-12 text-center">No commitment, Cancel anytime.
</div>
</div>
</div>
</div>
</div>
<div class="container-flex footer">
<div class="row">
<div class="col-4 text-center">
<img class="footerLogo" src="./assets/images/textjet_fitted.png" alt="textjet logo" />
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Pricing</div>
<div class="col-12 text-center footerText">FAQ</div>
<div class="col-12 text-center footerText">Contact Support</div>
</div>
<div class="col-4">
<div class="col-12 text-center footerText">Privacy Policy</div>
<div class="col-12 text-center footerText">Terms of Service</div>
<div class="col-12 text-center footerText">Anti-Spam Policy</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center footerTextCopy">
© Copyright 2020 Textjet LLC
</div>
</div>
</body>
</html> [Веб-версия 2
Комментарии:
1. Вы использовали инспектор элементов, чтобы узнать, откуда взялся этот стиль?
2. Я могу подтвердить, что инструменты разработчика не воспроизводятся, и я вижу проблему на мобильном устройстве
3. Выглядит нормально, ни один клиент этого никогда не заметит.
4. @FluffyKitten У меня есть. Я нашел тег btn btn-success, я даже искал все со словом Gradient в css, изменил все на оранжевый цвет и искал все в разделе @ mobile. Я потерян!
5. Конечно, операционная система используемого вами мобильного устройства устанавливает стиль по умолчанию для тега <button> … какую ОС и мобильный телефон вы используете?
Ответ №1:
Это не столько проблема с мобильными устройствами, сколько проблема с Safari, поскольку я могу видеть это на настольных и мобильных устройствах в macOS / iOS соответственно.
Проблема type="button" в том, что вы применили к своей гиперссылке. В начальной загрузке применяется следующий CSS:
[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}
Это переопределение элементов .btn класса. Удаление type="button" приводит к отображению вашей гиперссылки должным образом.
Комментарии:
1. Это решило проблему, Роберт. Спасибо, я бы никогда не догадался об этом. Я действительно ценю это! Ура!