• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

모바일 화면에서 hiring의 sns 문제-hiring.html 소스 올려 놓았습니다.

22.07.29 12:07 작성 조회수 78

1

hiring.html 소스로 올려 놓았습니다. 

제 소스에서 sns 클래스에 바로 sns 도메인 주소로 가도록 했는데.. 강사님 처럼 #none으로 해도 모바일 화면에서는 컬러색이 적용이 안됩니다. 참 그리고 페북과 트위터는 도메인주소로 했을때 접속이 안되는데.. 왜 차단이 되는건지도 설명해 주시면 감사하겠습니다.  

hiring.html:

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
<title>bizpage-subpage_hiring</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="modal">
<div class="header">
<div class="header-inner">
<div class="modal-display">+Hiring</div>
</div>
</div>
<div class="hiring-main">
<div class="hiring-heading">
<span>hiring</span>
<h1>Come work with us</h1>
</div>
</div>
<article class="hiring-info">
<div class="center-parent">
<div class="center-child">
<h2>Together we can make an impact</h2>
<p>bizpage offers the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs. With our global practice, we are currently creating the next generation of healthy, experience-based urban neighborhoods and resorts.</p>
</div>
</div>
<div class="photo"><img src="images/hiring-main-01-01.jpg"></div>
</article>
<article class="hiring-slogan">
<p>
Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.
</p>
</article>
<article class="hiring-info">
<div class="photo"><img src="images/hiring-main-01-02.jpg"></div>
<div class="center-parent">
<div class="center-child">
<h2>We’re always looking for talent</h2>
<p>If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available.</p>
<div class="hiring-contact">
<ul>
<li>SEOUL</li>
<li>OY Kang</li>
<li>+82-10-3687-4054</li>
<li>oykang@bizpagecorp.com</li>
</ul>
<ul>
<li>Hanam-si</li>
<li>Daniel Kang</li>
<li>+82-31-425-3336</li>
<li>daniel_kang@bizpagecorp.com</li>
</ul>
</div>
<div class="sns">
<a href="https://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="https://linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://youtube.com/" target="_blank"><i class="fa fa-youtube-play"></i></a>
<a href="https://bizpagecorp.com/contact" target="_blank"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
 
</div>
</article>
</div>
</body>
</html>

답변 1

답변을 작성해보세요.

0

모바일에서도 sns 아이콘 호버랑 링크 전혀 문제 없는데요.

혹시 responsive.css 다른걸 하셨나요?

responsive.css가 다르지 않다면 문제 없는걸로 확인되는데요.

ohwhy님의 프로필

ohwhy

질문자

2022.07.30

강사님 강의듣고 작성한 responsive.css 파일은 한개만 작성하였습니다. 제가 맥북프로를 사용하는데.. 혹시 맥북 크롬 검사에서 모바일 화면으로 전환시 지원이 안되는 문제가 있는걸까요? 

맥북 크롬 검사에서 모바일로 전환시 지원이 안되는 문제가 있지는 않을거에요.

완성본의 responsive.css를 사용해보세요. 그리고 문제가 없어지면 작성하신 responsive.css에 뭔가 있는거에요.

ohwhy님의 프로필

ohwhy

질문자

2022.07.30

980px 이하 모바일 scrolling 모드에서 responsive.css 의 .sns a:nth-child()::before 적용 안되는 부분을 .sns a:hover:nth-child()로 고쳐 주었더니 해결이 되었습니다. 그런데 pc 화면에서는 .sns a:nth-child()::before 로 잘 작동되는데 왜 모바일 화면에서는 적용이 안되어 .sns a:hover:nth-child() 수정해 줘야 되는건지 잘 이해가 안갑니다. 설명 부탁 드리겠습니다.