Home Forums WoodMart support forum Need to Make Home Page section to one colmun instead of two column on mobile

Need to Make Home Page section to one colmun instead of two column on mobile

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #339776

    keeraikadai
    Participant

    https://www.keeraikadai.com Please give css code or any other method to convert the following specified below to one column only for mobile view

    1) http://www.keeraikadai.com Home Page = Under Carefully Crafted Range of Products, there is Greeny Meal and Grenny Dip as two column. I want this as one column on mobile view alone
    2) all of the below links we want is as one column on mobile view alone.

    https://www.keeraikadai.com/shop/
    https://www.keeraikadai.com/product-category/greeny-dip/
    https://www.keeraikadai.com/product-category/greeny-meal/
    ====

    please note following are the codes already on the appearance = customize = additional css

    .whb-top-bar {
    background: linear-gradient(
    130deg
    ,#7ab343,#5ba648 41.07%,#adcd27 76.05%);
    }
    .gm-header-contact a {
    font-size: 13px;
    margin-right: 7px;
    color:#ffffff !important;
    }
    .gm-header-contact a i {
    margin-right: 3px;
    }
    .whb-primary-menu ul li a {
    text-transform: uppercase !important;
    }
    header .sub-menu-dropdown a {
    font-size: 16px !important;
    color: #333333 !important;
    }
    .main-page-wrapper {
    margin-top: -40px;
    padding-top: 0px;
    background-color: #FFF;
    }
    header .whb-general-header .whb-flex-row{
    align-items: flex-end;
    }
    header .menu-main-navigation-menu-container {
    margin-bottom: 25px;
    }
    header .whb-col-right {
    position: relative;
    }
    .gm-header-btn {
    position: absolute;
    top: -50px;
    border: 1px solid #80b959;
    padding: 0px;
    right: 9px;
    }
    .gm-header-btn a {
    display: block;
    padding: 0px 5px 0px 0px;
    font-weight: 600;
    color: #5d5d5d;
    text-transform: uppercase;
    font-size: 14px;
    transition:.6s;
    }
    .gm-header-btn a:hover {
    color: #80B941;
    }
    .gm-header-btn .fa {
    color: #80B941 !important;
    padding: 8px;
    font-size: 14px;
    text-align: center;
    }
    .whb-sticked .gm-header-btn
    {
    display:none;
    }
    .whb-sticked .menu-main-navigation-menu-container
    {
    margin-bottom:auto;
    }
    .whb-sticked .whb-general-header .whb-flex-row
    {
    align-items: center;
    }
    .labels-rounded .out-of-stock {
    font-size: 11px;
    background-color: #f7f7f7;
    }
    h4.rs-layer, p.rs-layer {
    text-shadow: 1px 2px 5px black !important;
    }
    .rs-layer ul li {
    margin-bottom: 5px;
    font-size: 18px;
    text-shadow: 1px 4px 8px black !important;
    padding-left: 21px;
    position: relative;
    }
    .rs-layer ul li:before {
    content: “\2605″;
    color: #80B941;
    font-size: 25px;
    position: absolute;
    left: -6px;
    top: -2px;
    }
    .gm-home-features {
    text-align: center;
    }
    .gm-home-features img {
    margin-bottom: 15px;
    width: 70px !important;
    }
    .gm-page-title {
    background-color: #0000008c;
    display: inline-block;
    padding: 10px 100px 10px 100px;
    }
    .gm-page-title h2 {
    font-size: 50px;
    font-weight: 600;
    color: #ffffff;
    margin: 0px;
    }
    .gm-page-title p {
    font-size: 35px;
    color: #ffffff;
    margin: 0px;
    }
    .woodmart-line-bullets .tp-bullet.selected .woodmart-bullet-num {
    color: #ffffff !important;
    }
    .woodmart-line-bullets .woodmart-bullet-num {
    color: #d6d6d6;
    }
    .wrapp-category .category-title {
    color: #ffffff !important;
    font-size: 32px;
    text-shadow: 0px 1px 5px black;
    }
    .gm-col-1 {
    width: 30%;
    float: left;
    text-align: center;
    }
    .gm-col-1 img {
    border-radius: 100%;
    margin-bottom: 15px;
    height:80px !important;
    }
    .gm-col-1 strong, .gm-col-1 span {
    display: block;
    }
    .gm-col-2 {
    width: 67%;
    float: right;
    }
    .gm-col-2 img {
    display: block !important;
    margin-bottom: 20px;
    }
    .mc4wp-form-fields input[type=”submit”] {
    background-color: #80B941;
    }
    .woodmart-timeline-item .woodmart-timeline-image{
    margin-bottom: -5px !important;
    }
    span.woodmart-timeline-breakpoint-title {
    background-color: #80B941 !important;
    border-radius: 10px;
    }
    .woodmart-timeline-title {
    font-size: 30px;
    font-weight: 600;
    }
    .gm-plant-based-nutrition .elementor-widget-wrap {
    border: 1px solid #d0d0d0;
    padding: 41px !important;
    margin: 10px;
    }
    .gm-contact-form input[type=submit] {
    background-color: #80B941 !important;
    color: #ffffff !important;
    }
    .woodmart-prefooter {
    display: none;
    }
    .tabs-location-standard.reviews-location-separate.tabs-type-tabs .woocommerce-tabs {
    padding-bottom: 0px;
    border-bottom: 0px solid;
    }
    .gm-product-icons {
    }
    .gm-product-icon-inner {
    display: inline-block;
    width: 30%;
    border-top-left-radius: 70px;
    margin-right: 5px;
    }
    .gm-product-icon-image img {
    height: auto;
    width:auto;
    }
    .gm-product-icon-image {
    width: 27%;
    height: auto;
    float: left;
    }
    .gm-product-icon-text {
    float: right;
    width: 68%;
    font-size: 15px;
    color: #000000;
    font-weight: 600;
    }
    .gm-product-icon-text p {
    margin: 0px;
    padding-top: 14px;
    }
    .gm-product-benefits .elementor-widget-wrap {
    border: 1px dashed white;
    padding: 30px !important;
    margin: 12px;
    }
    .gm-product-benefits span.list-content {
    font-size: 22px;
    }
    .gm-video-container .elementor-widget-container {
    box-shadow: 0px 7px 17px 0px #afafaf;
    }
    .gm-startup-logos .elementor-widget-wrap {
    border: 1px solid #d8d8d8;
    margin: 10px;
    }
    .min-footer .col-left {
    flex: 0 0 65% !important;
    max-width: 65% !important;
    }
    .min-footer .col-right {
    flex: 0 0 30% !important;
    }
    .gm-media-grids .wrapper-content-banner {
    background-color: #87bd4029;
    }
    .gm-news-gallery .woodmart-gallery-item img {
    border: 1px solid #eaeaea;
    margin: 2px;
    padding: 10px;
    }
    .gm-author-partner {
    text-align: center;
    }
    .gm-author-partner img {
    border-radius: 100%;
    height: 120px;
    margin-bottom: 8px;
    border: 3px solid #d8d8d8;
    }
    .gm-author-partner p, .gm-author-partner h3 {
    margin: 0px;
    }
    .gm-author-partner h3 {
    font-weight: 600;
    font-size: 18px;
    }
    .gm-author-partner p {
    color: #bdbdbd;
    font-size: 19px;
    padding: 0px;
    line-height: 1.3;
    }
    .gm-partner-form form {
    padding: 35px;
    box-shadow: 0px 2px 15px -8px #d0d0d0;
    border: 2px solid #80B941;
    min-height: 100%;
    background: linear-gradient(
    0deg
    , rgb(255 255 255 / 90%), rgb(255 255 255 / 95%)), url(http://www.keeraikadai.com/wp-content/uploads/2021/06/leaf-partner-form.jpg);
    background-size: 47%;
    background-repeat: no-repeat;
    background-color: #ffffff;
    }
    .gm-team-members .team-member {
    border: 1px solid #e8e8e8;
    }
    .gm-team-row-1 .team-member {
    min-height: 826px;
    }
    .gm-team-row-2 .team-member {
    min-height: 714px;
    }
    .gm-team-row-3 .team-member {
    min-height: 742px;
    }
    .gm-team-members .member-details {
    padding: 12px;
    }

    ul.menu.gm-footer-link-1 {
    width: 50%;
    float: left;
    }
    ul.menu.gm-footer-link-2 {
    width: 50%;
    float: right;
    }
    .gm-footer-social .fa {
    background-color: #80b941;
    color: #ffffff;
    padding: 11px;
    margin-right: 6px;
    }


    @media
    only screen and (max-width:767px)
    {
    .gm-page-title {
    padding: 10px 45px 10px 16px;
    }
    .gm-page-title h2 {
    font-size: 30px;
    }
    .gm-page-title p {
    font-size: 25px;
    }
    .labels-rounded .out-of-stock {
    font-size: 10px !important;
    background-color: #f7f7f7;
    }
    .gm-best-selling .col-6 {
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    }
    }

    @supports (-webkit-touch-callout: none) {
    .labels-rounded .out-of-stock {
    font-size: 8px !important;
    background-color: #f7f7f7;
    }
    }

    .gm-media-links {
    position: relative;
    overflow: hidden;
    }
    .gm-media-links:hover .gm-media-link-back {
    transform: scale(1.1);
    }
    .gm-media-links .gm-media-link-back {
    transition: .6s;
    }
    .gm-media-link-text {
    position: absolute;
    background-color: #ffffffc7;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 10px;
    width:100%;
    }
    .gm-media-link-text p {
    color: #1e2f81;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    }
    .gm-media-link-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 245px;
    }

    .gm-testimonials-container {
    text-align: center;
    }
    .gm-testimonials-quotes {
    margin-bottom: 20px;
    }
    .gm-testimonials-customer p {
    margin: 0px;
    }
    .gm-testimonials-customer img {
    margin-bottom: 10px;
    border-radius: 100%;
    height: 80px !important;
    border: 2px solid #e6e6e6;
    }
    .gm-testimonials-quotes img:first-child {
    margin-bottom: 10px !important;
    }
    .sa_hover_container {
    padding: 0px 5% !important;
    }

    .gm-footer-recnet-media-grid .gm-col-1 img {
    border-radius: 0px;
    }
    .gm-footer-recnet-media-grid .gm-col-2 h3 {
    font-size: 13px;
    margin: 0px;
    }
    .gm-footer-recnet-media-grid {
    border-bottom: 1px solid #d6d6d633;
    overflow: hidden;
    margin-bottom: 14px;
    }
    .gm-footer-recnet-media-grid:last-child {
    border-bottom: 0px solid #d6d6d633;
    }
    .gm-footer-recnet-media-grid .gm-col-2 a {
    font-size: 13px;
    }


    @media
    (min-width: 1025px){
    .whb-sticked .whb-general-header .woodmart-logo img {
    max-height: 83px !important;
    }
    .whb-general-header .woodmart-logo img {
    border-top-left-radius: 100px !important;
    border-top-right-radius: 100px !important;
    }
    }

    Attachments:
    You must be logged in to view attached files.
    #339848

    Hello,

    You can set the number of columns on all devices in the Theme Settings > Product Archive > Product Grid > Products columns on desktop /mobile / tablet.

    Please remove all your custom CSS related to the columns.

    If you have any questions please feel free to contact us.

    Best Regards

Viewing 2 posts - 1 through 2 (of 2 total)