#127922 mobile 3 columns

Landing Forums Jupiter WordPress Theme mobile 3 columns

Viewing 40 posts - 1 through 40 (of 40 total)
  • Author
    Posts
  • Sergio Torres

    Hi. how can i put in mobile this area of the homepage like this in attachment? Thank you

    Sergio Torres

    Also blog teaser is appearing duplicated in mobile. the first one should not appear

    Alexander Hutsol Support Team

    Hello,

     

    I assigned custom class name to the rows https://prnt.sc/1ingdvq .

    Now you just need to add this code in Theme Options > Advanced > Custom CSS:

    @media (max-width: 767px){
    .mobile-row .wpb_column.vc_column_container.vc_col-sm-4 {
    width: 33%;
    float: left;
    }
    .mobile-row h1 {
    font-size: 16px;
    }
    .mobile-row .mk-fancy-title p {
    font-size: 10px !important;
    }}

    As for the Blog Teaser, add this css code:

    @media (max-width: 767px){
    .mk-blog-teaser .blog-slider-item {
    display: none;
    }}

     

    Regards.

    Sergio Torres

    perfect thank you

    Alexander Hutsol Support Team

    Hello,

     

    You’re welcome.

    Regards.

    Sergio Torres

    Sorry but i see the word categories in 2 lines in mobile. I’ve tried putting the font smaller in mobile without sucess 🙁

    Can you check why it’s not assuming? Thank you

    Nodari Support Team

    Hi Sergio

    This css code can be used to fix sizing of the categories text:

    @media handheld, only screen and (max-width: 767px){
    #fancy-title-6 span h1 {
        font-size: 12px;
    }
    }

    Thanks

    Sergio Torres

    Perfect. Thank you

    Alexander Hutsol Support Team

    Hello,

     

    You’re welcome.

    Regards.

    Sergio Torres

    Hi. This client changed his mind and now the website has the menu on top, so some changes needed to be made. he wants 2 columns in mobile on the icons area like in attachment. I tried without sucess changing the css.

    Sergio Torres

    Also the blog teaser in mobile can’t be one news per line instead of 2?

    Sergio Torres

    And how can i put the row with the woocommerce products in 2 columns in mobile like in attachment?

    Sergio Torres

    And also the row with instagram feed in 2 columns

    Tatyana Hutsol Support Team

    Hello,

     

    1. To be able to show 2 columns of products, I recommend you to use Product Loop element https://prnt.sc/1qfd86j instead of “Recent Products”.

    2. As for the Instagram photos, add this code in Theme Options > Advanced > Custom CSS:

    @media (max-width: 640px){
    #sb_instagram.sbi_col_3 #sbi_images .sbi_item, #sb_instagram.sbi_col_4 #sbi_images .sbi_item, #sb_instagram.sbi_col_5 #sbi_images .sbi_item, #sb_instagram.sbi_col_6 #sbi_images .sbi_item {
    width: 50% !important;
    }}

    3. To show Blog Teaser posts one by one, add this css code:

    @media handheld, only screen and (max-width: 767px){
    .mk-blog-teaser .blog-teaser-side-item.half-item {
    width: 100% !important;
    }}

    4. As for the icons, I see they are shown as 2 columns on mobile https://prnt.sc/1qfdeab .

     

    Regards.

    Sergio Torres

    Hi. All good but this is attachment. Thank you

    Tatyana Hutsol Support Team

    Hello,

     

    To fix that alignment, please add this css code:

    @media (max-width: 767px){
    .mobile-row .mk-fancy-title p {
    line-height: normal !important;
    }}

    Regards.

    Sergio Torres

    Hi. Thank you. That worked but on the blog teaser the first news in mobile is smaller in height than the others bellow.

    Nodari Support Team

    Hi Sergio

    “first news in mobile is smaller in height ” – This code will fix that problem:

    @media handheld, only screen and (max-width: 767px){
    .mk-blog-teaser .thumb-featured-image img {
        min-height: 300px;
        object-fit: cover;
    }
    }

    Regards

    Sergio Torres

    About this: 1. To be able to show 2 columns of products, I recommend you to use Product Loop element https://prnt.sc/1qfd86j instead of “Recent Products”. I tried that but still is 1 instead of 2 in a row. Thank you

    Sergio Torres

    Also is it possible to remove the name of the category from this Blog magazine in mobile mode in attachment on the home? The comments i was able to remove on the element

    Mohsin Al-Rabieai Support Team

    Hi Sergio,

    Regarding making the product loops two-column, since you are using a bad practice adding inner rows, it makes it really hard to provide a CSS fix for that. You should seriously avoid adding Rows inside other Rows. In the image below you will see two rows inside each other.

    The first thing you need to do is to use only one Row and put the product loop outside of the inner rows. Look how the generated codes are look like:

    It causes that even if I provide you with a CSS fix, the items won’t be aligned. So, whatever you do, you need to put the product loop outside of inner rows first so I will be able to provide you a CSS fix to show the items in two columns in mobiles.

    —–

    You can hide the category in blog magazine only in mobile using the following CSS:

    @media screen and (max-width: 768px) {
        .mk-blog-magazine-item .mk-blog-meta .mk-categories {
            display: none;
        }
    }

    Bests

    Sergio Torres

    Hi. I made those changes but it didn’t take effect. Also client wants the category not to appear in the blog teaser. Thank you

    Tatyana Hutsol Support Team

    Hello,

     

    Please add this code in Theme Options > Advanced > Custom CSS:

    @media handheld, only screen and (max-width: 600px){
    body .mk-product-loop .mk--col--1-2, body .mk-product-loop .mk--col--3-12, body .mk-product-loop .mk--col--4-12 {
    width: 50%!important;
    }}
    
    .mk-blog-teaser .blog-categories {
    display: none;
    }

    Regards.

    Sergio Torres

    Hi. Shop products are ok on mobile but category News still appears on the blog teaser (desktop) and blog magazine (mobile). Thank you

    Sergio Torres

    And now the website has horizontal scroll because of the products not adjusting

    Mohsin Al-Rabieai Support Team

    Hi Sergio,

    You had a closing CSS bracket missing in your Custom CSS, I fixed it for you. Regarding the horizontal scrollbar, I can see that part of it is because of using the default VC image shortcode. Please note that it is using the width attribute that is causing responsive problems. Always use the Artbees image shortcode (red icon) to avoid such issues. Please replace all the image shortcodes with the Artbees Images.

    Bests

    Sergio Torres

    Hi. I did that but still the same on the horizontal bar scroll on mobile and now again the shop products are not in 2 columns in mobile. Thank you

    Tatyana Hutsol Support Team

    Hello,

     

    I edited the css code to this:

    @media handheld, only screen and (max-width: 600px) {
    body .mk-product-loop .mk--col--1-2, body .mk-product-loop .mk--col--3-12, body .mk-product-loop .mk--col--4-12 {
    width: 50%!important;
    }
    .mk-product-loop.compact-layout .products {
    margin: 0 auto !important;
    }
    body .vc_custom_1629311071555 {
    margin-right: 0 !important;
    }
    }

    Please check the page now.

     

    Regards.

    Sergio Torres

    Hi. Still with horizontal scroll on mobile. thank you

    Mohsin Al-Rabieai Support Team

    Hi Sergio,

    Please kindly add this CSS as well:

    @media handheld, only screen and (max-width: 600px) {
        .mk-product-loop.compact-layout {
            margin: 0 0px !important;
        }
        .mk-main-wrapper-holder {overflow-x: hidden; }
    }

    Bests

    Sergio Torres

    Hi. It worked but i don’t know if it was this change or any other made of css but now all pages have thee content cut on top of the page after the menu on desktop. And in pages like detail of blog that has title it’s transparent like this https://www.tenniscourt.tv/2021/09/06/djokovic-roger-federer-and-rafael-nadal-deserved-the-grand-slam/. Thank you

    Amir Rather Support Team

    Hello There

    Please try the below CSS to see if it helps?

    @media handheld, only screen and (min-width: 1024px) {
    #theme-page .theme-page-wrapper .theme-content {
        margin-top: 80px;
    }
    .single #theme-page .theme-page-wrapper .theme-content {
        margin-top: 163px !important;
    }}
    .header-style-1 .mk-header-padding-wrapper, .header-style-2 .mk-header-padding-wrapper, .header-style-3 .mk-header-padding-wrapper {
        padding-top: 0 !important;
    }
    #mk-page-introduce {
        background: white;
    }
    Sergio Torres

    It worked. Perfect. Thank you

    Amir Rather Support Team

    You’re most welcome 🙂

    Sergio Torres

    Hi. It’s still cutting in the product detail pages. Thank you

    Mohsin Al-Rabieai Support Team

    Hi Sergio,

    Can you please point it on a screenshot, please and provide a link to that issue? I may have difficulties locating it. I checked your single product pages and couldn’t see anything cut off in mobile and desktop.

    Bests

    Sergio Torres
    Amir Rather Support Team

    Try the below CSS please:

    .single-product .entry-summary, .single-product .product {
        margin-top: 20px;
    }

    Regards

    Sergio Torres

    it worked. thank you

    Nodari Support Team

    Thank you too

    Sergio please let’s not stretch this ticket anymore, instead strat a new ticket if you have a question

    Regards

Viewing 40 posts - 1 through 40 (of 40 total)
You must be logged in to reply to this topic.
Login