Gallery View on Mobile - by slidebird - on WordPress WooCommerce support

This topic has 18 replies, 3 voices, and was last updated 9 years ago ago by Eva Kemp

  • Avatar: slidebird
    slidebird
    Participant
    March 17, 2015 at 20:27

    Hi

    I have a gallery with tile view. on the desktop 5 tiles are fit in one row. so if i use 159×159 px it looks perfekt on the desktop. but the mobile view shows only on pictere on the phone which is a little bit more than half the sreen… so my question is can i specify the dimension for the mobile view for each gallery? So that i can keep the view on my desktop and show one full screen picture on the mobile oder maybe 2 pictures side by side…

    thx 4 help

    17 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    March 17, 2015 at 20:55

    Hello,

    Please give us permissions to view all settings in wp-admin panel to check the issue.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: slidebird
    slidebird
    Participant
    March 18, 2015 at 13:33

    ok credentials in privat content

    Please, contact administrator
    for this information.
    Avatar: slidebird
    slidebird
    Participant
    March 18, 2015 at 13:34

    uh and by the way which plugin do you use for this newsletter button?

    Avatar: Eva
    Eva Kemp
    Support staff
    March 18, 2015 at 15:20

    Hello,

    Sorry but the credentials are incorrect.
    Please check them.
    You should use MailChimp plugin http://wordpress.org/plugins/mailchimp-for-wp/ for newsletters form.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: slidebird
    slidebird
    Participant
    March 18, 2015 at 15:30

    hmm the credentials work for me ?! anyway i made a new user see private

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    March 18, 2015 at 16:46

    Hello,

    Are we talking about the same site max-schmuckdesign.com?
    Please give us correct link to wp-admin panel.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: slidebird
    slidebird
    Participant
    March 18, 2015 at 16:51

    no the adress is slidebird.wpengine.com

    its not ready yet and still on a wpengine domain

    Avatar: Eva
    Eva Kemp
    Support staff
    March 18, 2015 at 22:13

    Hello,

    I’ve added this code in custom.css file:

    @media (max-width: 480px) {.wpb_image_grid .wpb_image_grid_ul img {
       width: 300px;
    }}

    Please check gallery pictured now.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: slidebird
    slidebird
    Participant
    March 19, 2015 at 11:17

    Hey

    First of all please dont delete my entire custom css file… you overwrote it i guess cause it was only your code in the custom.cc file today and i did a couple of changes. i had a back up so no worries…

    For eample on the page http://slidebird.wpengine.com/technostein/feinsteinzeug/ is a gallery with images 172×172 and on the mobile the view shows one image in one row which is fine but the width of the mobile images are to small. i want it to be one image over the entire width of the mobile view.

    Your css didnt change that even if i tried a higher widht?!

    Avatar: Eva
    Eva Kemp
    Support staff
    March 19, 2015 at 11:54

    Hello,

    Please try to use this code instead of the previous one:

    @media (max-width: 480px) { .wpb_image_grid .wpb_image_grid_ul img {
        width: 350px;
        max-width: 500px;
       margin-left: -20px;
    }}

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: slidebird
    slidebird
    Participant
    March 19, 2015 at 13:08

    nope nothing changed… and the mobile menu is gone at all?

    Avatar: slidebird
    slidebird
    Participant
    March 19, 2015 at 13:12

    oh wait i got it

    Avatar: Robert Hall
    Robert Hall
    Support staff
    March 19, 2015 at 13:18

    Hello,

    We’re glad to hear it.
    If you have any questions feel free to contact us.

    Regards,
    Robert Hall.

    Avatar: slidebird
    slidebird
    Participant
    March 19, 2015 at 14:06

    thx ineed i have one more question…

    i want to use the right side pannel for my site search… just for the search only so i replaced the menu icon with an serach icon with this code

    .`.side-area-icon i:before, .menu-icon i:before{
    content: “\f002” !important;
    font-family: FontAwesome !important;
    font-size: 24px;
    padding-top: 2px;
    color: #fff;
    }`

    Works fine on desktopversion and the menu icon gets replced with the search icon but it seems these two classes has an effect on the mobile menu as well… so which class is responsible for the right side pannel icon only? sorry but couldnt figured it out

    Avatar: Robert Hall
    Robert Hall
    Support staff
    March 19, 2015 at 14:14

    Hello,

    Please try to add following code in custom.css file.

    @media (max-width: 480px){
    .hidden-phone {
      display: block !important;
    }
    .side-area-icon i:before{
     color: #000;
    }
    }

    Regards,
    Robert Hall.

    Avatar: slidebird
    slidebird
    Participant
    March 19, 2015 at 14:27

    thx 4 the quick reply but this only effects the search symbol on the mobile version… which is good to know too but my prolem ist the main menu icon gets replaced too… so instead of the main icon for the mobile menu which opens the site website navigation is now white und a search icon instead ob black an the menu icon…

    Avatar: Eva
    Eva Kemp
    Support staff
    March 19, 2015 at 17:51

    Hello,

    Please try to use this code instead of the one that you’ve written:

    .side-area-icon i:before {
    content: "\f002" !important;
    font-family: FontAwesome !important;
    font-size: 24px;
    padding-top: 2px;
    color: #fff;
    }

    Thank you.
    Regards,
    Eva Kemp.

  • Viewing 18 results - 1 through 18 (of 18 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.