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
- This topic has 1 reply, 2 voices, and was last updated 3 years, 2 months ago by
Elise Noromit.
-
AuthorPosts
-
December 15, 2021 at 2:14 pm #339776
keeraikadaiParticipanthttps://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.December 16, 2021 at 2:13 am #339848
Elise NoromitMemberHello,
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
-
AuthorPosts
Tagged: mobile responsive
- You must be logged in to create new topics. Login / Register