我正在通过Squarespace建立我的网站。我有一些编码知识，并创建了一个页面来显示所提供的服务。 www.jmrgraphicdesign.com/services
在桌面视图中，它看起来就像我想要的。在移动设备中，背景图像的高度会缩短。我试图调整.main，.sqs-block，.sqs-block-content元素，但没有任何效果。
[当我在Chrome中打开页面并检查页面时，我注意到当我更改.main元素的高度时，我可以看到完整的背景图像，但是随后更改了内容框（类为.col-narrow），因此我不知道为什么这些改变了。另外，当我在Dreamweaver中打开此html / css文件时，该背景图像没有任何反应，因此我认为这是来自网站样式表的。
我正在绞尽脑汁，但仍然看不到自己在做错什么，因此我需要一些帮助。
这里是页面上加载的HTML / CSS
@charset "UTF-8";
/* CSS Document */
/*container*/
main{padding: 25px;background-image: url("https://static1.squarespace.com/static/5bdb44322487fdd560b371e3/t/5e30740b9826d330d5cda582/1580233740443/jon-flobrant-s6L0uQyprpE-unsplash-1.jpg");background-position: center top !important;background-position: center center;background-size: cover;/* height: 100px; */}
.services-content-wrap {
max-width: 2000px;
min-height: 1000px;
margin: 0 auto;
padding: 50px;
overflow: hidden;
text-align: center;
display: center inline-block;
}
.col-narr {
box-sizing: content-box;
text-align:center;
width: 300px;
height:1000px;
float: left;
margin:13px;
padding: 20px;
background: #FFFFFF;
border-style: solid;
border-width:.5px;
border-color: #D9D2D3;
display: inline-block;
}
ul{
margin:0;
padding:0;
text-align: center;
list-style: none;
}
@media screen and (min-width: 1200px) {
.col-narr{
box-sizing: content-box;
text-align:center;
width: 270px;
height:1020px;
display: center inline-block;
}
}
@media screen and ( max-width: 500px){
.main{
background-image: url("https://static1.squarespace.com/static/5bdb44322487fdd560b371e3/t/5e2f58b6399d720a26b1ce61/1580161207190/services-background-mobile.jpg")
}
.col-narr{
text-align: center;
width: 75%;
height: 100%;
display: center inline-block;
box-sizing: content-box;
}
.services-content-wrap{
display: contents;
padding-left:0px;
text-align: center;
width: 100%;}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JMR Services</title>
<link href="s/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<div class="services-content-wrap">
<div class="col-narr">
<h2>Website Design</h2>
<h4>Blog Design</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $1495</p>
<ul>
<li>from scratch or redesign of an existing website</li>
<li>squarespace platform</li>
<li>print and digital design</li>
<li>company branding assets</li>
<li>a tailored moodboard</li>
<li>3 revisions on chosen concept</li>
<li>custom CSS and HTML coding</li>
<li>mobile responsive design</li>
<li>video tutorial of the site</li>
<li>website assets & hex color code guide</li>
</ul>
<h4>Shop/E-Commerce</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $1695</p>
<ul>
<li>from scratch or redesign of an existing website</li>
<li>shopify plus e-commerce development</li>
<li>print design and digital design</li>
<li>company branding</li>
<li>a tailored moodboard</li>
<li>up to 3 revisions on chosen concept</li>
<li>UX/UI design</li>
<li>custom CSS and HTML coding</li>
<li>mobile responsive design</li>
<li>video tutorial of the site</li>
<li>website assets & hex color code guide</li>
</ul>
</div>
<div class="col-narr">
<h2>Photo Production</h2>
<h4>Professional Photo Retouching</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $50-$100 per hour</p>
<ul>
<li>photoshop cc, bridge cc, and capture one</li>
<li>product and on-figure</li>
<li>color correction</li>
<li>non-destructive workflow</li>
<li>correct resolution and composition</li>
<li>maintain quality standards</li>
</ul>
</div>
<div class="col-narr">
<h2>Digital and Print Design</h2>
<h4>Banners</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $50 per hour</p>
<ul>
<li>creative, professional and attractive design</li>
<li>a tailored moodboard</li>
<li>2 revisions on chosen concept</li>
<li>static or animated</li>
<li>multiple sizes to fit platform models</li>
<li>video tutorial of the site</li>
<li>files & hex color code guide</li>
</ul>
<h4>Invitations</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $50 per hour</p>
<ul>
<li>creative, professional and attractive design</li>
<li>a tailored moodboard</li>
<li>2 revisions on chosen concept</li>
<li>digital and/or print design</li>
<li>multiple sizes and file extensions</li>
<li>files & hex color code guide</li>
</ul>
<h4>Promotional Materials</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $50 per hour</p>
<ul>
<li>creative, professional and attractive design</li>
<li>brochures, flyers, posters, etc.</li>
<li>a tailored moodboard</li>
<li>2 revisions on chosen concept</li>
<li>digital and/or print design</li>
<li>multiple sizes and file extensions</li>
<li>files & hex color code guide</li>
</ul>
</div>
<div class="col-narr">
<h2>Apparel Design and Development</h2>
<h4>Full Package</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $995</p>
<ul>
<li>a tailored digitalized moodboard</li>
<li>croquis sketches</li>
<li>tech packs and vector flats</li>
<li>item descriptions and names</li>
<li>digital linesheet</li>
<li>cost sheets</li>
<li>files & digital color swatch guide</li>
</ul>
<h4>Technical Flats</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $495</p>
<ul>
<li>vector flats blank and rendered</li>
<li>linesheet</li>
<li>item descriptions and names</li>
<li>files & digital swatch guide</li>
</ul>
<h4>Textile Prints</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $395</p>
<ul>
<li>a tailored moodboard</li>
<li>3 revisions on chosen concept</li>
<li>digital files & pantone color code guide</li>
</ul>
<h4>T-Shirt Graphics</h4>
<p>Starting at $75-$200</p>
<ul>
<li>a tailored moodboard</li>
<li>3 revisions on chosen concept</li>
<li>one graphic</li>
<li>up to 5 colors</li>
<li>digital files & pantone color code guide</li>
</ul>
</div>
<div class="col-narr">
<h2>Branding Design</h2>
<h4>Full Package</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $1495</p>
<ul>
<li>creative, professional, and attractive design</li>
<li>a tailored moodboard</li>
<li>3 revisions</li>
<li>logo design and development</li>
<li>business card and letter head design</li>
<li>website assets</li>
<li>files, typography, & hex color code guide</li>
</ul>
<h4>Logo Design</h4>
<h5>(Includes, but not limited to.)</h5>
<p>Starting at $995</p>
<ul>
<li>creative, professional, and attractive design</li>
<li>a tailored moodboard</li>
<li>3 revisions</li>
<li>design and development</li>
<li>responsive options</li>
<li>files, typography, & hex color code guide</li>
</ul>
</div>
</div>
</main>
</body>
</html>@media screen and ( max-width: 500px)
{
.sqs-block-content{
background-image: url("https://static1.squarespace.com/static/5bdb443…/t/5e2f58b…/1580161207190/services-background-mobile.jpg");
}
}