Bed transition to mobile - by Orna Ohayon

This topic has 16 replies, 2 voices, and was last updated 6 years, 5 months ago ago by Rose Tyler

  • Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    May 9, 2018 at 10:26

    Hello,

    I created a very beautiful and good site using the LEGENDA template
    But in the transition to mobile there are a lot of problems, I would appreciate your help:

    1. When you enter the store, you will see the list of categories and brands and then the store products,
    even when I choose the brand I want on the menu.
    I would be happy to have on mobile – only menu on the top bar with the three lines.
    For example: https://www.guilty.co.il/

    2. The home page looks terrible on Mobile
    A. The category pictures are really thumbnails – I want them to be end-to-end of the screen, having a presence and power.
    B. There are spaces that do not justify themselves, but perhaps when the images will grow, this problem will be solved.
    C. I don’t see the search button on Mobile

    Thank for your help
    Orna

    15 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 10:49

    Hello,

    1. To hide categories from the sidebar on mobile, add this code in Custom css:

    @media only screen and (max-width: 480px) {
        .sidebar-widget.widget_product_categories {
            display:  none;
        }
    }

    2. A, B. Add this code in the previous media query for mobile:

    .home .categoriesCarousel.column-3 .span4 {
        width: 100%;
    }
    

    like http://prntscr.com/jg1j4l
    C. The header search is hidden on mobile, here is our demo https://8theme.com/demo/legenda/
    Let us know if you need any further assistance.

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    June 5, 2018 at 11:46

    Hello,

    Thanks for your unswer
    1. I add the code in Custom css, but I dont see any changes on the mobail
    http://prntscr.com/jr1xn7
    http://prntscr.com/jr226x
    2.A+B. I add the code in Custom css, but I dont see any changes on the mobail
    http://prntscr.com/jr274h

    I have to say that I did the cleaning of the cell phone with cash

    2C. On your demo the page look magnificent and the search pup up beside the basket and logo when you roll down

    Pleas your help

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 5, 2018 at 14:08

    Hello,

    1, 2. Custom css file from css folder in child theme won’t work.
    Please add your custom css code in custom.css file of parent theme OR in style.css file of the child theme.
    2C. Please provide me screenshot.

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    June 6, 2018 at 07:52

    Hello,

    I see that you add it in the style.css, Thanks
    But, the category design changed and I didn’t want to change the visibility of desktop only the visibility on mobile

    now it look http://prntscr.com/jrgha8
    and befor it look like http://prntscr.com/jrgj87

    I delete the cods, and will happy for your help

    Regards
    Orna

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 6, 2018 at 10:18

    Hello,

    We did not edit your style.css file.
    Please change this code http://prntscr.com/jrifx4 to http://prntscr.com/jrig4j

    @media (max-width: 480px) {
    	.header .shopping-cart-widget {
    	   top: 30% !important; 
    	   right: 40% !important;
    	}
    	#sc_chat_box div.sc-chat-header {
    		width: 100px;
    	}
    	.sidebar-widget.widget_product_categories {
            display:  none;
        }
        .home .categoriesCarousel.column-3 .span4 {
    	    width: 100%;
    	}
    }

    Also, there is error in css code http://prntscr.com/jrifh2 you need to correct the code or delete incorrect part.

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    June 6, 2018 at 17:05

    Hello,

    I did all as you sagest

    ftp://asnat@80.244.168.181/httpdocs/wp-content/themes/legenda/custom.css

    ftp://asnat@80.244.168.181/httpdocs/wp-content/themes/legenda-child/style.css

    Unfortunately, I do not see a change after I have implemented the code and installed the second code

    I steel see the list of categories and brands and then the store products.
    I would be happy to have on mobile – only the menu on the top bar with the three lines.

    Regard,
    Orna

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 7, 2018 at 08:14

    Hello,

    To achive such result http://prntscr.com/jrxnsn
    please, change this code https://prnt.sc/jrxnju to:

    @media (max-width: 480px) {
       .header .shopping-cart-widget {
          top: 30% !important; 
          right: 40% !important;
       }
       #sc_chat_box div.sc-chat-header {
          width: 100px;
       }
       .sidebar-widget.widget_product_categories, .etheme_widget_brands {
          display:  none;
       }
       .home .categoriesCarousel.column-3 .span4 {
          width: 100%;
       }
    }

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    July 1, 2018 at 10:26

    Hellow,

    Meny thanks for all

    Last ask (:
    The store category names changing to black when I choose one
    https://snag.gy/xc4D25.jpg
    I like to change it to #e42871

    Best regards
    Orna

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 2, 2018 at 09:40

    Hello,

    You’re welcome.

    .et-mobile-menu li.over > a {
        color: #e42871;
    }

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    July 5, 2018 at 11:08

    Hello,

    I add that cod and it don’t work all over the category
    https://snag.gy/FUELAj.jpg

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 5, 2018 at 13:01

    Hello,

    Please change the previous code to:

    .et-mobile-menu li.over > a, .et-mobile-menu li > a:hover {
        color: #e42871;
    }

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    July 5, 2018 at 14:34

    Hello,
    I did and it’s not working
    https://snag.gy/ofS80Q.jpg

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 6, 2018 at 08:14

    Hello,

    I’ve provided this code – http://prntscr.com/k36lc1 but you added this one – http://prntscr.com/k36lhd

    Regards

    Avatar: Orna Ohayon
    Orna Ohayon
    Participant
    July 6, 2018 at 08:51

    Hello,
    I don’t know how it’s changed

    I add the right cod now and it work perfectly
    many thanks
    Orna

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 6, 2018 at 08:54

    Hello,

    You’re welcome!

    Regards

  • Viewing 16 results - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.