Мобильная версияПосле развертывания моего сайта он работает на рабочем столе и в Chrome. инструменты, но не тогда, когда я открываю их на своем настоящем телефоне. И я понятия не имею, как это исправить. Я попытался изменить размер изображения по сравнению с первым размером, который у меня был, но это не сработало. Я пробовал браузер Chrome на своем телефоне и Safari, он не работает, и телефон другого человека не работает. Значит, что-то с кодированием.
Это мои стили.
.showcase-button {
position: absolute;
right: 30px;
bottom: 30px;
}
.showcase:hover {
opacity: 0.7;
cursor: pointer;
}
.about-me-section {
background: url("/assets/about-me-bk.png");
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
background-color: #F7F7F7 !important;
}
.home-section {
background: url("/assets/home-bk.png");
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
background-color: white !important;
font-size: 12px !important;
}
@media (max-width: 480px) {
.home-section {
background: url("/assets/home-bk-phone.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
}
}
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
.home-section {
background: url("/assets/home-bk-tablet-vert.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
}
}
@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
.home-section {
background: url("/assets/home-bk-tablet.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
}
}
@media (max-width: 480px) {
.about-me-section {
background: url("/assets/about-me-bk-phone.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
font-size: 16px !important;
}
}
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
.about-me-section {
background: url("/assets/about-me-bk-tablet-vert.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
}
}
@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
.about-me-section {
background: url("/assets/home-bk-tablet-vert.png");
background-position: bottom center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
}
}
А вот мой HTML:
I am a full stack developer with a personal priority focus on front end development and web design. I currently
reside
in Charlotte, NC. and work for Data Ventures. Developing unique and engaging websites and web applications is a
passion of mine. Most of my current work (along with this website) exhibits my proficiency in the utilization of
Angular. However, I enjoy expanding my knowledge by learning new and exciting languages that will help to further
my
craft in web development.
When I'm not immersed in code and web applications, I enjoy sports of almost any kind. Because of the complexity
and
spontaneity of these two worlds, finding ways to incorporate web design and sports has become a passion of mine.
Apart
from this, my aspirations include exploring new ways to display and interact with the user, regardless of the
content.
Overall, I enjoy building websites and creating web applications, watching movies and playing basketball with my
amazing wife (3x Co-Ed league champs), hanging out with our adorable Miniature Dachshund, watching my son grow up,
sipping on a nice cold beer, and just enjoying what life decides to throw at me.
Подробнее здесь: https://stackoverflow.com/questions/786 ... s-in-brows
