اعظم

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

7 پست در این موضوع قرار دارد

با سلام

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

1

به اشتراک گذاری این پست


لینک به پست

با سلام

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

0

به اشتراک گذاری این پست


لینک به پست
در 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
1

به اشتراک گذاری این پست


لینک به پست

سلام

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

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

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

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

چه کار کنم؟

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

4.png

ویرایش شده در توسط اعظم
0

به اشتراک گذاری این پست


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

با سلام

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

سلام

دوستان لطفاً سرنخی بهم بدید تا بتونم جستجو کنم و دکمه افزودن به سبد خرید رو واکنشگرا کنم

1.png

2.png

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

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


ورود به حساب کاربری