Фон не отображается полностью в мобильном представлении - PullRequest
Новая
       72

Фон не отображается полностью в мобильном представлении

0 голосов
/ 29 января 2020

Я строю свой сайт через Squarespace. У меня есть некоторые знания в области кодирования, и я создал страницу, чтобы показать предлагаемые услуги. www.jmrgraphicdesign.com/services

В режиме рабочего стола это выглядит так, как я хочу. В мобильном фоновое изображение укорачивается по высоте. Я попытался настроить элементы .main, .sqs-block, .sqs-block-content и ничего не работает.

Когда я открываю страницу в chrome и осматриваю страницу, я замечаю, что когда я изменяю высоту элемента .main, я вижу полное фоновое изображение, но затем меняются поля содержимого (класс .col-узкий), поэтому я не понимаю, почему они меняются. Кроме того, когда я открываю этот html / css файл в Dreamweaver, с этим фоновым изображением ничего не происходит, поэтому я думаю, что это происходит из таблицы стилей сайтов.

Я ломаю голову и все еще не вижу, что делаю неправильно, поэтому мне нужна помощь.

Вот 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>&#40;Includes, but not limited to.&#41;</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 &#38; hex color code guide</li>
	</ul>


	<h4>Shop/E-Commerce</h4>
    <h5>&#40;Includes, but not limited to.&#41;</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 &#38; hex color code guide</li>
	</ul>

</div>
	
<div class="col-narr">
<h2>Photo Production</h2>
<h4>Professional Photo Retouching</h4>
<h5>&#40;Includes, but not limited to.&#41;</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>&#40;Includes, but not limited to.&#41;</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 &#38; hex color code guide</li>
	</ul>
	<h4>Invitations</h4>
	<h5>&#40;Includes, but not limited to.&#41;</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 &#38; hex color code guide</li>
	</ul>
	<h4>Promotional Materials</h4>
	<h5>&#40;Includes, but not limited to.&#41;</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 &#38; hex color code guide</li>
	</ul>
</div>

	

<div class="col-narr">
<h2>Apparel Design and Development</h2>
	<h4>Full Package</h4>
    <h5>&#40;Includes, but not limited to.&#41;</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 &#38; digital color swatch guide</li>
	</ul>
	<h4>Technical Flats</h4>
    <h5>&#40;Includes, but not limited to.&#41;</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 &#38; digital swatch guide</li>
	</ul>
	<h4>Textile Prints</h4>
  <h5>&#40;Includes, but not limited to.&#41;</h5>
	<p>Starting at $395</p>
  	<ul>
	<li>a tailored moodboard</li>
	<li>3 revisions on chosen concept</li>
	<li>digital files &#38; 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 &#38; pantone color code guide</li>
	</ul>
</div>

<div class="col-narr">
<h2>Branding Design</h2>
	<h4>Full Package</h4>
   <h5>&#40;Includes, but not limited to.&#41;</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, &#38; hex color code guide</li>
	</ul>
	<h4>Logo Design</h4>
  <h5>&#40;Includes, but not limited to.&#41;</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, &#38; hex color code guide</li>
	</ul>
</div>	
</div>
	
</main>
</body>
</html>

1 Ответ

1 голос
/ 29 января 2020

Текущее размещение в .main означает, что изображение хочет быть выше вашего контента (вот почему у вас там есть отступ 25px, от которого вы должны избавиться и на мобильном телефоне). Вам нужно переместить фоновое изображение в класс sqs-block-content для вашего стиля @media для мобильных устройств. 

@media screen and ( max-width: 500px)
{ 
    .sqs-block-content{
    background-image: url(url("https://static1.squarespace.com/static/5bdb44322487fdd560b371e3/t/5e2f58b6399d720a26b1ce61/1580161207190/services-background-mobile.jpg"));
    }
}
...