Mobile version questions

This is exactly what I did before I sent you a message. However, fonts on the shop and blog pages didn’t change. If you know how to solve this problem, please let me know.

Also, I got several questions about mobile version.

1. In product grid I choose the number of products I want to have in a row. For desktop version, I want 2 or 3. But for mobile, I want only one product in a row. How can I do that? Same question for Instagram grid. I want to have 4 pictures in a row for desktop, but 2 pictures in a row for mobile. How can I do that?

2. How can I make some parts of text smaller for mobile version without making them smaller for desktop version?

3. In the first block on this page https://silksilk.ru I have Revolution Slider. I need to make the sequence of slides different for mobile version. Is it possible to change the sequence os slides in Revolution Slider in desktop and mobile version?

Thank you in advance for detailed answers!

Hello,

Please provide your valid admin access I will check your font settings and provide CSS for grids.

2. There is no option to configure fonts on mobile and on the desktop. You will have to customize with CSS.

3. It is not possible to configure the slider in this way. You can create two sliders in two columns and then set the visibility of the column on different devises:
1. http://prntscr.com/j4fho7
2. http://prntscr.com/j4fio2

Best Regards

Thank you very much !

1) Please check font settings

2) Please provide CSS for grids (product grid and Instagram feed grid)

One more short question about mobile version:

3) Is it possible to set margins differently for desktop and mobile? In desktop, I set 10px margins and it looks nice, but in mobile version I don’t need to use margins (I want to have 0px margin). How can I do that?

Thank you!

Hello,

Fonts: As I told you, your have Montserrat already built in. You have set Montserrat from your custom (and have not uploaded all the files that is why custom does not work) and you have not specified “Cyrillic” As the result, font did not work. I have set the Google Montserrat, I have set Cyrillic and it works now.

Product grid Please add this code to the Theme Settigns > Custom CSS > Mobile/landscape:

.basel-products-holder .col-xs-6{
    width:100%;
}

Instagram It is a slider and it is not possible to change with CSS. Duplicate the column with Instagram and set the visibility of columns for different devices.
1. http://prntscr.com/j4fho7
2. http://prntscr.com/j4fio2

Is it possible to set margins differently for desktop and mobile? Yes, it is possible. You need to insert the class into the element and show me the screen and page URL. I will provide custom CSS.

Best Regards

Hello again,

Thank you so much for your help. I’m sorry to ask many question that may seem obvious to you, but I just started working with WordPress and many aspects seem not so easy. Good news is I’m almost done with the website and will stop asking question very soon 🙂

1. Fonts. Unfortunately, despite your changes, Montserrat font still doesn’t work for all pages. As I told you before, Montserrat worked on home page but didn’t work on shop page and blog page. It’s still like this.

You’re right that I didn’t upload font in all formats. I uploaded it in woff and woff2 formats, but when I tried to upload it in other formats (ttf, eot), I got message that these formats cannot be uploaded for security reasons.

2. In the second raw of my desktop version https://silksilk.ru I have 2 information boxes. In the mobile, the right info box goes before the left info box automatically, and it breaks the website logic. How can I change it to make the left box go before the right one?

3. Speed. There are hundreds of plugins that promise to speed up the website, can you recommend 1-3 plugins that are the best according to your experience?

4. Promo pop up. I want to insert pop up like on this page https://xtemos.com/docs/basel/faq-guides-2/edit-promo-popup-window/ to collect emails. Where should I insert the code that is mentioned on that page?

5. On this page https://silksilk.ru I have 2 blog articles with red buttons. How can I change the color on the buttons?

Thank you!

Hello,

1. Please have a look at the screen http://prntscr.com/l4fyd3 Remove your custom font at all, this font has been already built you need to choose it.

2. Have a look the screen http://prntscr.com/l4fz82

3. No, we cannot recommend we have not tested any.

4. Insert promo popup element, insert the text block and shortcode of the newsletter plugin inside.

5. Navigate to the Theme Settings > Styles and Colors

Best Regards

Thank you so much!

I have some more short design-related questions.

1. In the mobile version of my home page silksilk.ru if you scroll down to the very bottom of the page you’ll see two logos Silk Silk at the same time (one in header, one in footer). How can I make logo in footer the same size as logo in header?

2. In the second block of my homepage https://silksilk.ru I have two information boxes with images. Now I can go to the linked page only if I click on the button. I’d like to make it possible to go to the linked page ( https://silksilk.ru/benefits/ ) when I click on the images (both images should be clickable). How can I do that?

3. When I move mouse on the big image in the beginning of this page https://silksilk.ru/navolochki/ I see the name of the image (b43c…). How can I make sure that website visitors don’t see the names of my images?

Thank you!

Hello,

1. Check the size of the footer logo and configure the logo in the header accordingly: Theme Settings > Header > Logo set the width of logo container http://prntscr.com/l58crn

2. Remove the button and Info box will be clickable on the whole square

3. I cannot login your site and check which element you use to display the image, try this Single image element http://prntscr.com/l58mi8

Best Regards

Hi, thank you very much!

Regarding question number 3, I use single image element that you suggested on all pages where I have this issue. These are 3 pages 1) https://silksilk.ru/navolochki/ 2) https://silksilk.ru/maski/ 3) https://silksilk.ru/sets/

If you know how to get rid of this small but unpleasant detail, please let me know.

Also, I have 2 new questions.

1. I’d like to put my phone number in the right corner of the header (please check screenshot). How can I do that?

2. On this page https://silksilk.ru/benefits/ I have call to action box (grey one with orange button) I’d like to add custom background color and button color. How can I do that?

Thanks!

Sorry I forgot to attach screenshot, here it is

Attachments:

You must be logged in to view attached files.

Dear support,

When you answer my question #82450, please also answer one more question.

In the mobile version, when I reach the checkout page, the screen of my phone doesn’t fit the entire Woocommerce order form. Please check screenshot.

How can I change that?

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

1. Crete block and put image as a background. You will get rid of the title or write SEO-friendly title.

2. You need to change the Header layout to have a Header widget in this case you can insert the phone.

3. Enter the element Desing tab and set the background color http://prntscr.com/l5lerl

4. You need to decrease the font size of the text in the checkout. Theme Settings > Typography > Advanced Typography https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

Thank you!

Somehow I don’t have Advanced Typography in my theme settings, pls check screenshot. How can I get it?

Attachments:

You must be logged in to view attached files.

Hello,

You need to update your theme. This option is available in the recent release.

Make the full backup of the site and export your theme settings: Theme Settings > Import/Export.

Follow the instructions updating the theme: https://xtemos.com/docs/basel/update-theme/

Best Regards

Thank you!

Could you please help me write CSS selector that will decrease the font size of the text in the checkout in the mobile version? (see screenshot). I tried some but it didn’t work correctly 🙁

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS:

table.woocommerce-checkout-review-order-table tfoot .order-total td>strong {
    font-size: 16px;
}

table.woocommerce-checkout-review-order-table tfoot .order-total th {
	font-size: 18px;
}

Best Regards

Hello!

In the mobile version of my website on the main page, shop page and category pages I have pictures of products. Now users can tap on product image to see the second product image.

If people want to see all pictures of certain product, they have to go to product page and they will see a product carousel there.

I need people to be able to see product carousel right on the main page, shop page and category pages without the need to go to certain product page.

For example, people visit page https://silksilk.ru/silk-pillowcases/, see pink pillowcase picture, and slide left to see all pictures of pink pillowcase without going to product page https://silksilk.ru/product/pillowcase-sakura/

My question is about mobile version of these pages:

https://silksilk.ru
https://silksilk.ru/shop/
https://silksilk.ru/silk-pillowcases/
https://silksilk.ru/silk-sleep-masks/
https://silksilk.ru/silk-pajamas/

Could you please help me do it?

Hello,

The default Woocommerce does not have such an option and our theme does not have either.

Best Regards

[Author]

Posts