رفتن به مطلب

واکنشگر کردن سایت روی موبایل و تبلت


پست های پیشنهاد شده

با سلام

دوستان، من وقتی سایت رو روی مرورگر کروم باز می کنم و کوچیک اش می کنم، دکمه افزودن به سبد خرید کم کم به حدی می رسه که کامل نشون داده نمی شه. در حال حاضر خروجی سایت روی موبایل به گونه ای است که دکمه افزودن به سبد خرید، نصفه نشون داده می شه

چندین لینک در مورد واکنشگر بودن رو دیدم ولی نمی دونم این کدها رو کجای فایل های سایت باید قرار بدم.

یک نمونه رو در style.css قرار دادم ولی اتفاقی نیافتاد. یکی اش رو هم در header.php قرار دادم ولی هیچ اتفاقی نیافتاد.

لینک به ارسال

سلام

کدهای responsive رو باید داخل فایل css بنویسید. جستجو کنید media query آموزش های مربوطه رو می تونید پیدا کنید

لینک به ارسال

با سلام

من خط قرمز رو به فایل 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;
    }

 

1.png

لینک به ارسال
در 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;
    }

 

1.png

@media only screen and (max-width:479px) {

  تو استایل خودتون هست . اینجا می تونید به کلاس مورد نظر استایل بدید و از سایز کوچکتر  479 استایل جدید تعریف کنید.

اگر هم موفق نشدید ادرس صفحه مورد نظر بدید تا براتون اوکی کنیم.

ویرایش شده توسط Mirrajabi
لینک به ارسال

سلام

ممنونم از اینکه پاسخ دادید

راستش متوجه نشدم.

باید در این قسمت

@media only screen and (max-width:479px) 

چه کار کنم؟

می شه راهنمایی ام کنید؟ اگر باز هم متوجه نشدم مزاحمتون می شم

4.png

ویرایش شده توسط اعظم
لینک به ارسال
در در 8/31/2017 at 20:32، اعظم گفته است :

با سلام

دوستان، من وقتی سایت رو روی مرورگر کروم باز می کنم و کوچیک اش می کنم، دکمه افزودن به سبد خرید کم کم به حدی می رسه که کامل نشون داده نمی شه. در حال حاضر خروجی سایت روی موبایل به گونه ای است که دکمه افزودن به سبد خرید، نصفه نشون داده می شه

چندین لینک در مورد واکنشگر بودن رو دیدم ولی نمی دونم این کدها رو کجای فایل های سایت باید قرار بدم.

یک نمونه رو در style.css قرار دادم ولی اتفاقی نیافتاد. یکی اش رو هم در header.php قرار دادم ولی هیچ اتفاقی نیافتاد.

با سلام آدرس سایت رو بدید راهنمایی کنم.

لینک به ارسال
  • 2 هفته بعد...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...