코스모스팜 스레드

CSS Order에 대해서 문의드립니다.

안녕하세요! 만들어주신 제품, 그리고 게시판 모두 감사하게 사용하고 있습니다.

https://studiocroissant.com/product/painting-flower/

위에 있는 페이지에 대해서 문의를 드리고자 이렇게 글을 적었습니다.

데스크탑에서는 CSS가 아주 예쁘게 잘 됩니다만, 휴대폰에서 약간의 문제가 있습니다.

https://imgur.com/V3dWsVn

https://imgur.com/qBqc5Ny

바로 위에 캡쳐한 화면과 같이 상품 사진이 가격 밑에 위치하지 않고 아주 밑에 위치하게 된다는 것입니다.

이를 해결하기 위해서 저는 다음과 같은 CSS 코드를 삽입하였습니다.

 

@media screen and (max-width: 1023px) {.single-product #main {padding-top: 0vh !important;}.single-product .product {display: flex !important;flex-flow: column !important;}.single-product .summary {order: 2 !important;}.single-product .images {order: 1 !important;margin-bottom: 30px !important;}.single-product .content-holder,.single-product .related,.single-product .upsells {order: 3 !important;margin-top: 50px !important;}.single-product .entry-navigation {order: 4 !important;}}

 

그런데 왠일인지 작동이 잘 되지 않습니다. 혹시 제 CSS 어디가 잘못된 것인지 알 수 있을까요?

 

항상 감사드립니다!

 

 

무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)
이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)