اعظم 3 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 با سلام دوستان، من وقتی سایت رو روی مرورگر کروم باز می کنم و کوچیک اش می کنم، دکمه افزودن به سبد خرید کم کم به حدی می رسه که کامل نشون داده نمی شه. در حال حاضر خروجی سایت روی موبایل به گونه ای است که دکمه افزودن به سبد خرید، نصفه نشون داده می شه چندین لینک در مورد واکنشگر بودن رو دیدم ولی نمی دونم این کدها رو کجای فایل های سایت باید قرار بدم. یک نمونه رو در style.css قرار دادم ولی اتفاقی نیافتاد. یکی اش رو هم در header.php قرار دادم ولی هیچ اتفاقی نیافتاد. نقل قول لینک به ارسال
SM-Mahdavi 5427 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 سلام کدهای responsive رو باید داخل فایل css بنویسید. جستجو کنید media query آموزش های مربوطه رو می تونید پیدا کنید 1 نقل قول لینک به ارسال
اعظم 3 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 با سلام من خط قرمز رو به فایل header.php اضافه کردم در فایل style.css قالب هم چنین کدهایی وجود داره ولی برای کاهش سایز دکمه افزودن به سبد خرید چیزی ندیدم. چگونه دکمه و نوشته درونش در موبایل تغییر سایز می دهند؟ /*-------------------------------------------------------------- ## Media Queries By WEN Themes --------------------------------------------------------------*/ /* Smaller than standard 1139 (devices and browsers) */ @media only screen and (max-width:1300px) { .container { width: 97%; } .comments-area form#commentform p { float: left; width: 100%; } #comments input { width: 100%; } #comments input#submit { width: auto; } .site-header { padding: 15px 0 10px; } .right-header { width: auto; } .main-navigation ul li li a { margin: 0; } .authorbox .author-info, .authorbox .author-bio-posts-content { float: left; max-width:70%; width: 70%; } } /* Smaller than standard 1024 (devices and browsers) */ @media only screen and (max-width:1023px) { h1 { font-size: 22px; } h2 { font-size: 20px; } h3{ font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } .inner-wrapper { margin-left: -10px; margin-right: -10px; } #primary, .sidebar, #colophon { padding-left: 10px; padding-right: 10px; } td, th { font-size: 12px; padding: 2px; text-align: center; } body.three-columns-enabled #primary, body.three-columns-enabled #content .sidebar, body #content #primary, body #content .sidebar { border-bottom: 1px solid #dddddd; margin-bottom: 20px; padding-bottom: 20px; width: 100%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:900px) { body{ padding-top: 0; } #page { margin-top:45px; } #main-nav, #header-nav { display: none; } #right-header { float: none; padding: 0 15px; width: 100%; } #cart-section { clear: both; float: none; text-align: center; } #cart-section li { display: inline-block; float: inherit; list-style: outside none none; padding: 10px; } /*Moblile menu*/ a#mobile-trigger { display: block; float: left; padding-left:25px; } .sidr-main-open a#mobile-trigger{ padding-left:278px; } .mobile-nav-wrap { background: #242424 none repeat scroll 0 0; display: block; left: 0; padding: 6px; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999; } .logged-in .mobile-nav-wrap { top: 45px; height: 49px; } #mobile-trigger i { background-color: #fa5742; box-shadow: 0 1px 2px #242424 ; color: #ffffff; font-size: 21px; padding: 6px 8px; } .sidr ul li ul li a, .sidr ul li ul li span { line-height: 1.5; padding-bottom: 10px; padding-left: 30px; padding-top: 10px !important; } /*#top-nav*/ #header-nav { display: none; } #mobile-trigger2 { text-align: right; transition: inherit; padding-right: 25px; } .sidr2-open #mobile-trigger2{ padding-right:278px; } #mobile-trigger2 i { background-color: #383433; box-shadow: 0 1px 2px #242424 ; color: #ffffff; font-size: 21px; padding: 6px 8px; } a#mobile-trigger2 { float: right; display: block; } /*Mobile Menu*/ #primary, .sidebar { width: 100%; } .clean_commerce_widget_recent_posts .recent-posts-item { clear: both; float: left; margin-top: 30px; width: 100%; } .site-branding { float: none; margin: 0 auto; max-width: 100%; text-align: center; } .site-title { margin-top: 0; } .custom-logo-link, .site-logo-link, #site-identity { float: none; margin-right: 0; display: block; clear: both; } .clean_commerce_widget_products_slider .side-banner { padding-left: 20px; } #featured-carousel .featured-product-carousel-wrapper .slick-list{ margin-left:10px; margin-right: 10px; } #featured-carousel .featured-carousel-item { padding-left:10px; padding-right: 10px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:768px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product { margin: 0 0 20px; width: 48.05%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:767px) { .site-header { position: inherit; } h1 { font-size: 22px; } h2 { font-size: 20px; } h3{ font-size: 18px; } h4 { font-size:16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } #quick-contact li { font-size: 13px; margin-bottom: 5px; margin-left: 10px; margin-top: 2px; } #footer-widgets, #colophon { margin-left: 0; margin-right: 0; } #featured-carousel .featured-product-carousel-wrapper .slick-list { margin: 0; } #featured-carousel .slick-prev.slick-arrow { left: 10px; } #featured-carousel .slick-next.slick-arrow { right: 10px; } #featured-carousel .slick-prev.slick-arrow, #featured-carousel .slick-next.slick-arrow { bottom:0; opacity: 1; top: inherit; } body .sidebar, body #primary { width: 100%; } .site-content { padding-top: 15px; } #content { clear: both; padding-top: 20px; } #primary article.hentry { overflow: hidden; padding: 10px; } /*footer widget area*/ .sibebar { margin-top: 15px; } #footer-widgets .footer-widget-area { float: left; padding: 0 15px; width: 50%; } #footer-widgets .footer-active-1 { width: 100%; } #footer-widgets .footer-widget-area:nth-child(3n) { clear: both; } .widget.clean_commerce_widget_services .service-block-item { width: 50%; } .widget { margin: 15px 0 0; } #footer-widgets { padding: 30px 15px; } #colophon .copyright, #colophon .site-info { clear: both; text-align: center; width: 100%; } #colophon .colophon-column, #colophon .colophon-grid-2 .colophon-column, #colophon .colophon-grid-3 .colophon-column, #colophon .colophon-grid-4 .colophon-column { float: left; width: 100%; } #footer-navigation { text-align: center; margin-bottom:10px; } .copyright { margin-bottom: 5px; } .entry-footer > span { border-right: medium none; border-top: 1px solid #dddddd !important; display: block; float: left; padding: 10px 15px; width: 100%; } .entry-footer { border: none; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width:550px) { .page-title { font-size: 30px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width:479px) { .sidr-main-open a#mobile-trigger2 { float: right; display: block; float: left; clear: both; padding-left: 260px; } .sidr-main-open a#mobile-trigger { float: right; display: block; float: left; clear: both; padding-left: 260px; } .sidr2-open a#mobile-trigger { float: left; padding-left: 5px; } .sidr2-open a#mobile-trigger2 { padding-right: 270px; } .site-branding { text-align: center; } #footer-widgets .footer-widget-area { width: 100%; } #footer-widgets .footer-widget-area:first-child { border: none; margin-top: 0; padding-top: 0; } #footer-widgets .footer-widget-area { width: 100%; padding-top: 15px; border-top: 1px solid #fff; margin-top: 15px; } .site-description { margin-bottom: 0; } .search-box .search-box-wrap { right: 3%; width: 263px; } .social-links { float: right; max-width: 208px; text-align: right; } .social-links .clean_commerce_widget_social li { display: inline-block; float: none; } .search-box { float: right; position: relative; width: 33px; } .page-title { font-size: 20px; margin-bottom: 7px; } #tophead { text-align: center; } #quick-contact { float: none; clear: both; } .header-social-wrapper .clean_commerce_widget_social li { float:none; display: inline-block; } #quick-contact li { display: inline-block; float: none; font-size: 13px; } .header-social-wrapper { float: none; margin-top: 2px; } #cart-section .cart-icon { margin-left: 0; margin-right: 0; } #cart-section li { padding:10px 5px; } نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) در 19 ساعت قبل، اعظم گفته است : با سلام من خط قرمز رو به فایل header.php اضافه کردم در فایل style.css قالب هم چنین کدهایی وجود داره ولی برای کاهش سایز دکمه افزودن به سبد خرید چیزی ندیدم. چگونه دکمه و نوشته درونش در موبایل تغییر سایز می دهند؟ /*-------------------------------------------------------------- ## Media Queries By WEN Themes --------------------------------------------------------------*/ /* Smaller than standard 1139 (devices and browsers) */ @media only screen and (max-width:1300px) { .container { width: 97%; } .comments-area form#commentform p { float: left; width: 100%; } #comments input { width: 100%; } #comments input#submit { width: auto; } .site-header { padding: 15px 0 10px; } .right-header { width: auto; } .main-navigation ul li li a { margin: 0; } .authorbox .author-info, .authorbox .author-bio-posts-content { float: left; max-width:70%; width: 70%; } } /* Smaller than standard 1024 (devices and browsers) */ @media only screen and (max-width:1023px) { h1 { font-size: 22px; } h2 { font-size: 20px; } h3{ font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } .inner-wrapper { margin-left: -10px; margin-right: -10px; } #primary, .sidebar, #colophon { padding-left: 10px; padding-right: 10px; } td, th { font-size: 12px; padding: 2px; text-align: center; } body.three-columns-enabled #primary, body.three-columns-enabled #content .sidebar, body #content #primary, body #content .sidebar { border-bottom: 1px solid #dddddd; margin-bottom: 20px; padding-bottom: 20px; width: 100%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:900px) { body{ padding-top: 0; } #page { margin-top:45px; } #main-nav, #header-nav { display: none; } #right-header { float: none; padding: 0 15px; width: 100%; } #cart-section { clear: both; float: none; text-align: center; } #cart-section li { display: inline-block; float: inherit; list-style: outside none none; padding: 10px; } /*Moblile menu*/ a#mobile-trigger { display: block; float: left; padding-left:25px; } .sidr-main-open a#mobile-trigger{ padding-left:278px; } .mobile-nav-wrap { background: #242424 none repeat scroll 0 0; display: block; left: 0; padding: 6px; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999; } .logged-in .mobile-nav-wrap { top: 45px; height: 49px; } #mobile-trigger i { background-color: #fa5742; box-shadow: 0 1px 2px #242424 ; color: #ffffff; font-size: 21px; padding: 6px 8px; } .sidr ul li ul li a, .sidr ul li ul li span { line-height: 1.5; padding-bottom: 10px; padding-left: 30px; padding-top: 10px !important; } /*#top-nav*/ #header-nav { display: none; } #mobile-trigger2 { text-align: right; transition: inherit; padding-right: 25px; } .sidr2-open #mobile-trigger2{ padding-right:278px; } #mobile-trigger2 i { background-color: #383433; box-shadow: 0 1px 2px #242424 ; color: #ffffff; font-size: 21px; padding: 6px 8px; } a#mobile-trigger2 { float: right; display: block; } /*Mobile Menu*/ #primary, .sidebar { width: 100%; } .clean_commerce_widget_recent_posts .recent-posts-item { clear: both; float: left; margin-top: 30px; width: 100%; } .site-branding { float: none; margin: 0 auto; max-width: 100%; text-align: center; } .site-title { margin-top: 0; } .custom-logo-link, .site-logo-link, #site-identity { float: none; margin-right: 0; display: block; clear: both; } .clean_commerce_widget_products_slider .side-banner { padding-left: 20px; } #featured-carousel .featured-product-carousel-wrapper .slick-list{ margin-left:10px; margin-right: 10px; } #featured-carousel .featured-carousel-item { padding-left:10px; padding-right: 10px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:768px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product { margin: 0 0 20px; width: 48.05%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width:767px) { .site-header { position: inherit; } h1 { font-size: 22px; } h2 { font-size: 20px; } h3{ font-size: 18px; } h4 { font-size:16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } #quick-contact li { font-size: 13px; margin-bottom: 5px; margin-left: 10px; margin-top: 2px; } #footer-widgets, #colophon { margin-left: 0; margin-right: 0; } #featured-carousel .featured-product-carousel-wrapper .slick-list { margin: 0; } #featured-carousel .slick-prev.slick-arrow { left: 10px; } #featured-carousel .slick-next.slick-arrow { right: 10px; } #featured-carousel .slick-prev.slick-arrow, #featured-carousel .slick-next.slick-arrow { bottom:0; opacity: 1; top: inherit; } body .sidebar, body #primary { width: 100%; } .site-content { padding-top: 15px; } #content { clear: both; padding-top: 20px; } #primary article.hentry { overflow: hidden; padding: 10px; } /*footer widget area*/ .sibebar { margin-top: 15px; } #footer-widgets .footer-widget-area { float: left; padding: 0 15px; width: 50%; } #footer-widgets .footer-active-1 { width: 100%; } #footer-widgets .footer-widget-area:nth-child(3n) { clear: both; } .widget.clean_commerce_widget_services .service-block-item { width: 50%; } .widget { margin: 15px 0 0; } #footer-widgets { padding: 30px 15px; } #colophon .copyright, #colophon .site-info { clear: both; text-align: center; width: 100%; } #colophon .colophon-column, #colophon .colophon-grid-2 .colophon-column, #colophon .colophon-grid-3 .colophon-column, #colophon .colophon-grid-4 .colophon-column { float: left; width: 100%; } #footer-navigation { text-align: center; margin-bottom:10px; } .copyright { margin-bottom: 5px; } .entry-footer > span { border-right: medium none; border-top: 1px solid #dddddd !important; display: block; float: left; padding: 10px 15px; width: 100%; } .entry-footer { border: none; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width:550px) { .page-title { font-size: 30px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width:479px) { .sidr-main-open a#mobile-trigger2 { float: right; display: block; float: left; clear: both; padding-left: 260px; } .sidr-main-open a#mobile-trigger { float: right; display: block; float: left; clear: both; padding-left: 260px; } .sidr2-open a#mobile-trigger { float: left; padding-left: 5px; } .sidr2-open a#mobile-trigger2 { padding-right: 270px; } .site-branding { text-align: center; } #footer-widgets .footer-widget-area { width: 100%; } #footer-widgets .footer-widget-area:first-child { border: none; margin-top: 0; padding-top: 0; } #footer-widgets .footer-widget-area { width: 100%; padding-top: 15px; border-top: 1px solid #fff; margin-top: 15px; } .site-description { margin-bottom: 0; } .search-box .search-box-wrap { right: 3%; width: 263px; } .social-links { float: right; max-width: 208px; text-align: right; } .social-links .clean_commerce_widget_social li { display: inline-block; float: none; } .search-box { float: right; position: relative; width: 33px; } .page-title { font-size: 20px; margin-bottom: 7px; } #tophead { text-align: center; } #quick-contact { float: none; clear: both; } .header-social-wrapper .clean_commerce_widget_social li { float:none; display: inline-block; } #quick-contact li { display: inline-block; float: none; font-size: 13px; } .header-social-wrapper { float: none; margin-top: 2px; } #cart-section .cart-icon { margin-left: 0; margin-right: 0; } #cart-section li { padding:10px 5px; } @media only screen and (max-width:479px) { تو استایل خودتون هست . اینجا می تونید به کلاس مورد نظر استایل بدید و از سایز کوچکتر 479 استایل جدید تعریف کنید. اگر هم موفق نشدید ادرس صفحه مورد نظر بدید تا براتون اوکی کنیم. ویرایش شده شهریور 96 توسط Mirrajabi 1 نقل قول لینک به ارسال
اعظم 3 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) سلام ممنونم از اینکه پاسخ دادید راستش متوجه نشدم. باید در این قسمت @media only screen and (max-width:479px) چه کار کنم؟ می شه راهنمایی ام کنید؟ اگر باز هم متوجه نشدم مزاحمتون می شم ویرایش شده شهریور 96 توسط اعظم نقل قول لینک به ارسال
بهنام مرادی 19 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در در 8/31/2017 at 20:32، اعظم گفته است : با سلام دوستان، من وقتی سایت رو روی مرورگر کروم باز می کنم و کوچیک اش می کنم، دکمه افزودن به سبد خرید کم کم به حدی می رسه که کامل نشون داده نمی شه. در حال حاضر خروجی سایت روی موبایل به گونه ای است که دکمه افزودن به سبد خرید، نصفه نشون داده می شه چندین لینک در مورد واکنشگر بودن رو دیدم ولی نمی دونم این کدها رو کجای فایل های سایت باید قرار بدم. یک نمونه رو در style.css قرار دادم ولی اتفاقی نیافتاد. یکی اش رو هم در header.php قرار دادم ولی هیچ اتفاقی نیافتاد. با سلام آدرس سایت رو بدید راهنمایی کنم. نقل قول لینک به ارسال
اعظم 3 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 سلام دوستان لطفاً سرنخی بهم بدید تا بتونم جستجو کنم و دکمه افزودن به سبد خرید رو واکنشگرا کنم نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .