在较小的“移动”视图中将文本显示在图片下面。
在较小的“移动”视图中将文本显示在图片下面。
提问于 2021-12-12 22:33:44
我有一个网站，工作在桌面模式，但当我缩小页面，字体停留在图片上，使它，所以我看不到图片和文字。如何调整html或css (或两者兼而有之)？使其使字体在图片下方时，网站是在一个较小的设备上查看？
下面是我的html和css代码：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!-- {% load static %} -->
<head>
<!--Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% block meta_description %} Welcome to Performance Painting's website {% endblock %}">
<title> {% block title %}Performance Painting {% endblock %}</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free HTML Templates" name="keywords">
<meta content="Free HTML Templates" name="description">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Favicon -->
<link href="{% static 'website/img/favicon.ico' %}" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Icon Font Stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="{% static 'website/lib/owlcarousel/assets/owl.carousel.min.css' %}" rel="stylesheet">
<!-- Customized Bootstrap Stylesheet -->
<link href="{% static 'website/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="{% static 'website/css/style.css' %}" rel="stylesheet">
</head>
<body>
<!-- Topbar Start -->
<div class="container-fluid bg-primary d-none d-lg-block">
<div class="container">
<div class="row">
<div class="col-md-6 text-center text-lg-start mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center">
<a class="text-dark py-2 pe-3 border-end border-white" href=""><i class="bi bi-telephone text-secondary me-2"></i>425-330-6295</a>
<a class="text-dark py-2 px-3" href=""><i class="bi bi-envelope text-secondary me-2"></i>snazzypainter@gmail.com</a>
</div>
</div>
<div class="col-md-6 text-center text-lg-end">
<div class="d-inline-flex align-items-center">
<a class="text-body py-2 px-3 border-end border-white" href="">
<i class="fab fa-facebook-f text-secondary"></i>
</a>
<a class="text-body py-2 px-3 border-end border-white" href="">
<i class="fab fa-twitter text-secondary"></i>
</a>
<a class="text-body py-2 px-3 border-end border-white" href="">
<i class="fab fa-linkedin-in text-secondary"></i>
</a>
<a class="text-body py-2 px-3 border-end border-white" href="">
<i class="fab fa-instagram text-secondary"></i>
</a>
<a class="text-body py-2 ps-3" href="">
<i class="fab fa-youtube text-secondary"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark shadow-sm px-5 py-3 py-lg-0">
<a href="home.html" class="navbar-brand p-0">
<h1 class="m-0 text-uppercase text-primary"><i class="fa fa-paint-roller text-secondary me-3"></i>Performance Painting</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto py-0 pe-4 border-end border-5 border-primary">
<a href="{% url 'home' %}" class="nav-item nav-link active">Home</a>
<a href="{% url 'about' %}" class="nav-item nav-link">About</a>
<a href="{% url 'service' %}" class="nav-item nav-link">Service</a>
<a href="{% url 'team' %}" class="nav-item nav-link">The Team </a>
<a href="{% url 'detail' %}" class="nav-item nav-link">Our Blog</a>
<a href="{% url 'testimonial' %}" class="nav-item nav-link">Testimonials</a>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="d-none d-lg-flex align-items-center ps-4">
<i class="fa fa-2x fa-mobile-alt text-secondary me-3"></i>
<div>
<h5 class="text-primary mb-1"><small>Call Now</small></h5>
<h6 class="text-light m-0">425-330-6295</h6>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- Hero Start -->
<div class="container-fluid bg-primary py-5 bg-hero" style="margin-bottom: 90px;">
<div class="container py-5">
<div class="row justify-content-start">
<div class="col-lg-8 text-center text-lg-start">
<h1 class="display-1 text-dark">We Bring Your Home To Lively Colors</h1>
<p class="fs-4 text-dark mb-4">Performance Painting is top rated in the Snohomish County
With over 30 years in the painting business, we bring quailty and excellence.
Thats the PERFORMANCE guarantee! </p>
<div class="pt-2">
<a href="" class="btn btn-secondary rounded-pill py-md-3 px-md-5 mx-2">Get A Quote</a>
<a href="{% url 'contact' %}" class="btn btn-outline-secondary rounded-pill py-md-3 px-md-5 mx-2">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- Hero End -->下面是CSS：
/********** Template CSS **********/
:root {
--primary: #FFE468;
--secondary: #8CC641;
--light: #F2F2F2;
--dark: #272630;
}
.btn {
font-weight: 700;
transition: .5s;
}
.btn:hover {
-webkit-box-shadow: 0 8px 6px -6px #555555;
-moz-box-shadow: 0 8px 6px -6px #555555;
box-shadow: 0 8px 6px -6px #555555;
}
.btn.btn-secondary {
color: #FFFFFF;
}
.btn-square {
width: 36px;
height: 36px;
}
.btn-sm-square {
width: 28px;
height: 28px;
}
.btn-lg-square {
width: 46px;
height: 46px;
}
.btn-square,
.btn-sm-square,
.btn-lg-square {
padding-left: 0;
padding-right: 0;
text-align: center;
}
.back-to-top {
position: fixed;
display: none;
right: 30px;
bottom: 30px;
z-index: 99;
}
.navbar-dark .navbar-nav .nav-link {
position: relative;
margin-left: 30px;
padding: 35px 0;
font-size: 18px;
color: var(--light);
outline: none;
transition: .5s;
}
.sticky-top.navbar-dark .navbar-nav .nav-link {
padding: 20px 0;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
color: var(--primary);
}
@media (min-width: 992px) {
.navbar-dark .navbar-nav .nav-link::before {
position: absolute;
content: "";
width: 0;
height: 5px;
bottom: 0;
left: 50%;
background: var(--primary);
transition: .5s;
}
.navbar-dark .navbar-nav .nav-link:hover::before,
.navbar-dark .navbar-nav .nav-link.active::before {
width: 100%;
left: 0;
}
}
@media (max-width: 991.98px) {
.navbar-dark .navbar-nav .nav-link {
margin-left: 0;
padding: 10px 0;
}
}
.bg-hero {
background: url(../img/hero.jpg) top right no-repeat;
background-size: contain;
}
@media (max-width: 991.98px) {
.bg-hero {
background-size: cover;
}
}
.about-start,
.about-end {
background: url(../img/about-bg.jpg) center center no-repeat;
background-size: contain;
}
@media (min-width: 992px) {
.about-start {
position: relative;
margin-right: -90px;
z-index: 1;
}
.about-end {
position: relative;
margin-left: -90px;
z-index: 1;
}
}
.service-item,
.contact-item {
background: url(../img/service.jpg) top center no-repeat;
background-size: cover;
transition: .5s;
}
.service-item:hover,
.contact-item:hover {
background: url(../img/service.jpg) bottom center no-repeat;
background-size: cover;
}
.service-item .service-icon,
.contact-item .contact-icon {
margin-top: -50px;
width: 100px;
height: 100px;
color: var(--secondary);
background: #FFFFFF;
transform: rotate(-45deg);
}
.service-item .service-icon div,
.contact-item .contact-icon div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary);
transition: .5s;
}
.service-item .service-icon i,
.contact-item .contact-icon i {
transform: rotate(45deg);
transition: .5s;
}
.service-item:hover .service-icon div,
.contact-item:hover .contact-icon div {
background: var(--secondary);
}
.service-item:hover .service-icon i,
.contact-item:hover .contact-icon i {
color: var(--primary);
}
.service-item a.btn {
position: relative;
bottom: -30px;
opacity: 0;
}
.service-item:hover a.btn {
bottom: 0;
opacity: 1;
}
.bg-quote {
background: url(../img/quote.jpg) top right no-repeat;
background-size: contain;
}
@media (max-width: 991.98px) {
.bg-quote {
background-size: cover;
}
}
.team-item {
position: relative;
margin-bottom: 45px;
}
.team-text {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: url(../img/team.jpg) bottom center no-repeat;
background-size: cover;
height: 90px;
padding: 0 30px;
right: 45px;
left: 45px;
bottom: -45px;
transition: .5s;
z-index: 1;
}
.team-item:hover .team-text {
height: 100%;
bottom: 0;
}
.team-social {
position: absolute;
transition: .1s;
transition-delay: .0s;
opacity: 0;
}
.team-item:hover .team-social {
transition-delay: .3s;
opacity: 1;
}
.bg-testimonial {
background: url(../img/testimonial.jpg) top left no-repeat;
background-size: contain;
}
@media (max-width: 991.98px) {
.bg-testimonial {
background-size: cover;
}
}
.testimonial-carousel .owl-nav {
margin-top: 30px;
display: flex;
justify-content: start;
}
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next{
position: relative;
margin: 0 5px;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
background: var(--secondary);
font-size: 22px;
border-radius: 45px;
transition: .5s;
}
.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
color: var(--dark);
}
.testimonial-carousel .owl-item img {
width: 60px;
height: 60px;
}
.bg-call-to-action {
background: url(../img/call-to-action.jpg) top right no-repeat;
background-size: contain;
}
.bg-footer {
background: url(../img/footer.jpg) center center no-repeat;
background-size: contain;
}
@media (max-width: 991.98px) {
.bg-call-to-action,
.bg-footer {
background-size: cover;
}
}回答 1
Stack Overflow用户
发布于 2021-12-13 07:05:56
您可以使用"@media“这样做。以下是它的发展方向：
@media (max-width: 800px) {
.myclass {
font-size: 20px;
}
}您可以调整像素的数量。如果您想了解更多关于@media的信息，请访问以下链接：mediaquery.asp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70328256
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号