Home › Forums › WoodMart support forum › SETTING UP THE MOBILE VERSION OF THE SITE

SETTING UP THE MOBILE VERSION OF THE SITE

Viewing 30 posts - 1 through 30 (of 39 total)
1 2
  • Author
    Posts
  • May 22, 2020 at 6:32 am #196889

    Evgeny Sviridov
    Participant

    Hello, please help solve my problem. In the mobile version of my site, I need to raise the text shown in screenshot 1 above. How can I do this?

    Attachments:
    You must be logged in to view attached files.
    May 22, 2020 at 8:50 am #196922

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshot you attached and visited your website. Please add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .woodmart-text-block-wrapper {
top: -50px;
}
#homeslider .woodmart-button-wrapper a {
top: -70px !important;
}

    Screenshot for Clarification: https://ibb.co/MhYvZZV

    Best Regards.

    May 22, 2020 at 10:28 am #196956

    Evgeny Sviridov
    Participant

    Thank. Please tell me how in the next block I can align the text to the left (screenshot 2)?

    Attachments:
    You must be logged in to view attached files.
    May 22, 2020 at 11:22 am #196967

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    I saw the screenshot you attached. It seems that the specific elements have assigned the padding’s that are affecting the view on mobile.

    Screenshot for Clarification: https://ibb.co/YpB8RdV

    You need to assign separate class to the particular element and then targeting the class you can assign the padding accordingly. For example in the to assign the class as in screenshot.

    Screenshot for Clarification: https://ibb.co/BBC9H2N

    Best Regards.

    May 26, 2020 at 5:49 am #197879

    Evgeny Sviridov
    Participant

    Thank! I can’t assign “Extra class name”, you can show me with an example how to register the class and how the code in CSS should look for it. In the elements where the “extra CSS class” is written, I have no difficulties, and where the “Extra class name” is written, I can’t indent.

    May 27, 2020 at 7:22 am #198196

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    The extra class option for the element is under the general tab where you can assign the class and use it according to your needs.

    Screenshot for Clarification: https://ibb.co/FV1xx8T

    For example I have created an extra class named test and it’s appearing in the front end.

    Screenshot for Clarification: https://ibb.co/9Tfwtz0

    Best Regards.

    May 27, 2020 at 12:23 pm #198325

    Evgeny Sviridov
    Participant

    Thank! I have such a block on my site (screenshot 1). On the mobile version, it is displayed like this (screenshot 2, 3). How in the mobile version of the site, in the last three paragraphs (screenshot 3), do the icons and text change places?

    Attachments:
    You must be logged in to view attached files.
    May 27, 2020 at 12:57 pm #198339

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    I have visited your website and the three paragraphs are displayed the same way as they are in the desktop view.

    Please clear cache and check back.

    As you can see in the screenshot of the desktop the icons are after the text and they are displayed the same way in mobile.

    Screenshot for Clarification: https://ibb.co/KLBCFrJ

    Best Regards.

    May 28, 2020 at 6:03 am #198495

    Evgeny Sviridov
    Participant

    Everything is correct, but I need the icons to be on the left and the text on the right in the mobile version, in both blocks. How can i implement this?

    May 28, 2020 at 8:34 am #198546

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Unfortunately, you could not have the different views of the same element on mobile and desktop.

    You cannot move the icons as you want. It requires customization and this is beyond our limitations and support policy.

    Best Regards.

    May 28, 2020 at 12:59 pm #198663

    Evgeny Sviridov
    Participant

    Thank. The main page of my site now looks like shown in screenshot 1. When I adjusted the indentation, I lost 40 px somewhere on top. Now, on all other pages, 40 px is missing from the top (screenshot 2). Please tell me where I made a mistake?

    Attachments:
    You must be logged in to view attached files.
    May 28, 2020 at 1:08 pm #198667

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshots you attached. Please add the following Custom CSS in the Global Custom CSS area for the specific page you are getting the issue.

    For example the following code will affect the page whose id is 5.

    .page-id-5 .site-content {
margin-top: 40px;
}

    You can set the page id according to your needs.

    Best Regards.

    June 5, 2020 at 8:06 am #200924

    Evgeny Sviridov
    Participant

    Hello! Please help me solve my problem. In the attribute “color”, in case the colors are located on one line, the “clear” button is located on the same line (screenshot 1). In the event that the colors are located on two or three lines, the “clear” button is located on the next line (screenshots 2,3). Because of this, the word “color” itself, due to indentation, moves down. How can, in the first cases, remove the “clear” button on the next line so that the word “color” can be aligned by indentation?

    Attachments:
    You must be logged in to view attached files.
    June 5, 2020 at 10:55 am #200976

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshots you attached. Unfortunately, there is no option in Theme Settings to move the clear filter button for the variations to the next line.

    If we try it to move using CSS then it will also affect the alignment of the button for the color variations more than one line. You could not set the display for each color swatches length.

    Best Regards.

    June 5, 2020 at 11:44 am #200989

    Evgeny Sviridov
    Participant

    The topic is responsible for this, I understand correctly? It is strange that everything is displayed correctly on the mobile version of the site.

    June 5, 2020 at 1:10 pm #201039

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .swatches-select {
display: block;
}

    Screenshot for Clarification: https://ibb.co/YjpQbgM

    Best Regards.

    June 9, 2020 at 12:49 pm #202066

    Evgeny Sviridov
    Participant

    Thank!
    I ran into the following problem. My site looks like shown in screenshot 1. The indentation for this block is set, as shown in screenshot 2. Please tell me how I can set them through “Extra class name” (screenshot 3)?

    Attachments:
    You must be logged in to view attached files.
    June 9, 2020 at 12:55 pm #202077

    Evgeny Sviridov
    Participant

    Because if I write “Extra class name” – hotspot1, and in “Global Custom CSS” I add the code: .hotspot1 {
    margin-top: -40px;
    padding-top: 0px;
    margin-left: -356px;
    margin-right: -356px;
    margin-bottom: 40px;
    }
    It does not work.

    June 9, 2020 at 1:12 pm #202096

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshots you attached and visited your website. There is no class as you mentioned. Please make sure you have added the class correctly to check it myself and help you out accordingly.

    Screenshot for Clarification: https://ibb.co/T4mkvtZ

    Best Regards.

    June 9, 2020 at 1:46 pm #202107

    Evgeny Sviridov
    Participant

    Look, I added a class. Now the block looks like shown in screenshot 4. How can I fix it?

    Attachments:
    You must be logged in to view attached files.
    June 10, 2020 at 6:40 am #202234

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I have visited your website and added the CSS you provided its working for the extra class that you have added from the edit page.

    Please clear cache and check back.

    Screenshot for Clarification: https://ibb.co/c3GW4KJ

    Best Regards.

    June 10, 2020 at 6:51 am #202239

    Evgeny Sviridov
    Participant

    It works, but the result is completely different. Previously, it looked like shown in screenshot 1. Now it looks like shown in screenshot 4. How can I make it look again, as shown in screenshot 1. Using CSS.

    Attachments:
    You must be logged in to view attached files.
    June 10, 2020 at 11:16 am #202336

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I have created a new page on your website and added the image hotspot module there. You can edit the module according to your needs.

    Screenshot for Clarification: https://ibb.co/SXQZCL1

    URL of the page: https://test.tehnooptmetall.ru/image-hotspot/

    Best Regards.

    June 16, 2020 at 8:29 am #203853

    Evgeny Sviridov
    Participant

    Hello! I ran into the following problem. A window on the main page of my site stopped popping up when I hover over a hot spot (screenshot 1). I think I disabled something in the .hotspot1 class. Please help me solve my problem.

    Attachments:
    You must be logged in to view attached files.
    June 16, 2020 at 11:09 am #203928

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Your issue has been solved. I have adjusted the custom CSS code which you have added in the Theme Settings >> Custom CSS >> Global Custom CSS section. http://prnt.sc/t0otdq

    Please check your site after removing the browser cache.

    Best Regards.

    June 17, 2020 at 11:59 am #204222

    Evgeny Sviridov
    Participant

    Hello! After my manipulations with the code, I lost the word “Price:” (screenshots 1 and 2). How can I get her back?

    Attachments:
    You must be logged in to view attached files.
    June 17, 2020 at 12:20 pm #204246

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I saw the screenshots you attached. The price text is not there by default. To add the text with the price try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

    .single-product-page .price::before {
content: "цена: ";
font-size: 19px;
}

    Best Regards.

    June 18, 2020 at 6:55 am #204436

    Evgeny Sviridov
    Participant

    Thank! And how to return the word “price” in this case? (screenshot 3 and 4)

    Attachments:
    You must be logged in to view attached files.
    June 18, 2020 at 11:04 am #204526

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome. I saw the screenshots you attached.

    Please try and add the following Custom CSS.

    .product-grid-item .price::before {
content: "цена: ";
font-size: 19px;
}

    Best Regards.

    June 18, 2020 at 12:09 pm #204555

    Evgeny Sviridov
    Participant

    Thank! And how to return the word “price” in this case? (screenshot 5)

    Attachments:
    You must be logged in to view attached files.
  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 39 total)
1 2

The topic ‘SETTING UP THE MOBILE VERSION OF THE SITE’ is closed to new replies.