Home Forums Themes Support Claue Mobile device issues, mainly about appearance view.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #36525
    Nina M
    Supported

    Hello Harry,

    We have issues on our Mobile device version that are okay in our computer device view.

    Could you please help us to solve these following issues about Mobile device version on our website :

    On the Homepage :

    1/ Size of the Metaslider cubics – too big vs. the image – Please see Questions 1- 2- screenshot

    2/ Space between Metaslider and the 3 “icon & text” – Please see Questions 1- 2- screenshot

    3/ Space between the 3 “icon & text” on top of the Homepage, and at the bottom of the Homepage – Please see Question 3- and 3- bis – screenshots.

    4/ About Instagram integration view : As you can see we have only one big picture on our Mobile screen. We would like to have more like a gallery, with at least 2-3 posts view, could you please help us to set up that ?

     

    Attachments:
    You must be logged in to view attached files.
    #36531
    Nina M
    Supported

    Following, on the others pages :

    5/ There is a zoom out of the picture on “Category pages” on the Mobile device vs. Computer. How could we fix the wanted size on the Mobile phone please ? Please see Question 5 – Screenshot

    6/ On the product page, on the computer we can see the color text detail when we go on the color cercle. We manage to obtain just once this color info on the Mobile device (See 6-1 screenshot – “bordeaux” text) but all the other times we have nothing (See 6-2 screenshot). We would like to set up the info on the Mobile everytime, how could we do this please ?

    Thanks a lot again for your help, your responses help us a lot.

    Nina

    Attachments:
    You must be logged in to view attached files.
    #36535
    Nina M
    Supported

    7/ Is it possible to move on left “Add to the cart” on the product detail page please ?

    Attachments:
    You must be logged in to view attached files.
    #36537

    Hi Nina,

    1,2. Please edit the second row on homepage and reduce space between icon and slider https://prnt.sc/sl66hg

    and add below code

    @media only screen and (max-width: 767px) {
    .metaslider .flex-control-nav {
    	bottom: 10px !important;
    }
    .metaslider.ms-theme-cubic .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a, .metaslider.ms-theme-cubic ul.rslides_tabs li a, .metaslider.ms-theme-cubic div.slider-wrapper .nivo-controlNav:not(.nivo-thumbs-enabled) a, .metaslider.ms-theme-cubic .coin-slider .cs-buttons a {
    	line-height: 10px;
    	width: 10px;
    	height: 10px;
    }}

    3. Edit the columns wrap icon and add padding bottom https://prnt.sc/sl695g

    4. Please edit plugin > claue-addons > includes > shortcode > instagram.php and change code on line 53 slidesToShow: 1 to slidesToShow: 3 https://prnt.sc/sl6c8c

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #36545
    Nina M
    Supported

    Hi Harry,

    Thanks a lot for your answers, we close 1/ 2/ 3/ and 4/ mobile device issues easily with your screenshot and instructions.

    Could you please check our last questions (5/ 6/ and 7/) ?

    Thanks so much

    Nina

     

    #36557

    Hi,

    5. Please add more code

    @media only screen and (max-width: 767px) {
    .jas-wc .page-head {
    	background-size: contain;
    	background-repeat: no-repeat;
    }}

    6,7. I’m sorry on mobile it doesn’t have hover state when mouse over the color.
    Please add more code

    .swatch__list--item.is-selected .swatch__tooltip {
    	top: -33px;
    	opacity: 1;
    	visibility: visible;
    }
    @media only screen and (max-width: 480px) {
    form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    	font-size: 13px;
    	padding: 0 23px;
    }}

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #36560
    Nina M
    Supported

    Hi Harry,

    Thanks a lot for your return.

    For 5/ please find attached the 2 screenshots, one Mobile tthe other Computer, for a better explanation of what we would like for Mobile device view. It concerns all our categories pages + all pages like About us, Contact us, Delivery & Returns….
    The code that you gave us don’t zoom up the picture and reduce the width of the picture.

    6/7/ Perfect ! Thanks a lot, it is exactly what we wanted !

     

     

    Attachments:
    You must be logged in to view attached files.
    #36574

    Hi,

    I recommend use zoom image because it will auto fill with more type of screen (desktop, tablet, mobile) so please remove code.

    It can’t zoom exact as you want. It will zoom all

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #36579
    Nina M
    Supported

    Ok… thanks for your response and help.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.