Setting up the mobile version of the site

Please tell me! I have a computer version of the slider (screenshot 1), that’s how it looks in the mobile version (screenshot 2). I want the slider on the mobile version to be displayed like this (screenshot 3). I have already prepared the picture, but I don’t understand how to do it.

Attachments:

You must be logged in to view attached files.

Hello,

As you are using hotspot element of theme and you used image inside it. It seems that you hide that column in which you used the image from the responsive options in column settings.

Kindly unchecked the “Hide on device?” option for mobile devices as in the screenshot:
https://jmp.sh/wz3nmJH

Also it is not possible to change the horizontal view of image to vertical because you are using the image inside hotspot element not in the slider.

Best Regards.

I understand that I will not be able to use this horizontal image, so I hid it. Instead of this horizontal image, I need to make another vertical image, which I prepared in advance. How can i do this?

Hello,

You can define another row with your vertical image and apply the same settings with a little difference. Just hide this one for desktop and not for the mobile.

Also I suggest you to use the revolution slider for this purpose so you can able to display different slides according to the screen sizes.

Best Regards.

Thank! How can I center the text shown in the screenshot? In the mobile version of the site.

Attachments:

You must be logged in to view attached files.

Most Welcome,

To display the section title and text in the centre in mobile screens.
First define a class “tCenter” in that element as in the screenshot: https://jmp.sh/ehrR663

Then used the below css code in Theme Settings >> Custom Css >> Custom CSS for mobile:

.tCenter h4{
    text-align:center;
}
.tCenter .title-after_title{   
    text-align:center;
}

Result: https://jmp.sh/wKWSl9m

Best Regards

Thank! How can I center the text shown in this screenshot? Also in the mobile version of the site.

Attachments:

You must be logged in to view attached files.

Hello,

To display that text in the center in mobile devices which you pointing out in the screenshot. Please add the specific row ID “homeslider” to the row by edit the row http://prnt.sc/pghyhg then use the below css code in Theme Settings >> Custom Css >> Custom CSS for mobile:

#homeslider .woodmart-button-wrapper {
text-align:center;
}
#homeslider .woodmart-text-block {
text-align:center;
}

Result: https://jmp.sh/1OUxfIW

Best Regards.

Thank! Can I make a button to request a callback in the mobile version of the site, in the header, to the right of the logo, instead of the search button (screenshot 1)? By clicking on which a window would open, as in screenshot 2.

Attachments:

You must be logged in to view attached files.

Most Welcome,

Yes, you can add request a callback in the mobile version of the site. Follow the below steps:

1. First of all add an html-block and inside the block add a popup and element and select a form or any other element on click.

Screenshot: https://jmp.sh/euuOm25

2. Now edit your header and select the mobile layout and then add element html-block and select that html-block that recently created.

Screenshot: https://jmp.sh/RpOuwgJ

Result: https://jmp.sh/UmSD9JN

Best Regards.

Is it possible to make a button an icon, like the search button in a screenshot?

Attachments:

You must be logged in to view attached files.

Hello,

No, you can not use icon except of using a button for popup. As I guide you to use the popup element for this purpose. So the popup only allows the button when it clicks the popup will display.

Currently there is no option inside the popup element for icons.

Best Regards.

It’s a pity, for the mobile version it would be convenient to have such functionality at hand. Can I make the title sticky only for the mobile version of the site (screenshot 1) so that when I scroll down the page, it sticks to the top and remains visible. And on the computer version of the site so that everything remains unchanged?

Attachments:

You must be logged in to view attached files.

Hello,

As you are using the “Responsive text block” element inside the row and that row displaying as a slider having text over it. So it is not possible to make it sticky.

There is no such option. It requires customization and this is beyond our limitations and support policy.

Best Regards.

Perhaps we did not understand each other. I need to make the site header sticky. Where is the logo, menu button and search button located.

Hello,

Sorry for misunderstanding. I thought you are talking about the slider text.

As you want to make the header sticky. Go to WoodMart >> Header Builder >> Edit your current header “Default header layout”. You can edit any of the row and select the option make it sticky and save changes as in the screenshot: https://jmp.sh/KJRbFYt

Best Regards.

I need the title to be sticky only on the mobile version of the site. On the computer version of the site, I do not want the title to be sticky.

Hello,

It’s not possible to make a row sticky on mobile layout only and not in the desktop. Because the row is the same and sticky option is same for both the screen sizes.

Best Regards.

It’s a pity. Thank you for answering my questions.

Hello,

I am sorry for now as it is not possible but I am forwarding this to our development department for considering to add it in the theme, but I am not giving you the guarantee for that because please note that a theme cannot satisfy all requirements as it may occur theme heaviness. Sometimes it may require your own customization. So if the development department finds it fit with the theme environment then surely they will look through it.

Thanks for your understanding.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts