Next/Prev space too small on mob responsive view

  • Resolved karenyoung1

    (@karenyoung1)


    8 years, 1 month ago

    Hi, thanks for this plugin. I have installed it on a website that I have just recently converted to WordPress. An example page here: https://bernardbarnes.com/portfolio/fragments-of-devon/
    What I wanted was something that would open up a lightbox to scroll through all of the pictures on a post (in this case a portfolio post) and that is just what it does. It works very well on my desktop browser.

    I have a request for help. Everything works fine except when viewing on a mobile device (phone or tablet) the area for tapping is too small, so is easy to miss with big fingers and then what happens is you don’t scroll, you just end up back at the page. Is there something I can edit myself to make the area larger? Is it defined in the CSS or somewhere else? My tests have been on Android phones and tablets.

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello Karen Young ( I hope I’m correct ),

    You’re right, actually the area for tapping is pretty much exactly the size of the icon, which might be hard to aim at on a touch-device !

    I’ll think of a way to make it easier for a futur update !

    But as I can’t tell you when it will be available, here is some informations to do it by yourself.

    I used LESS as a pre-processor language, so I would highly recommend you to look at the mwl.less file instead of the mwl.css file ( using LESS is really easy, don’t worry ! ).

    Then, I separated the different templates styles in the mwl.less file, so you should try to find the appropriate class and then edit the style of the navigation controls ( .control-nav ).

    I think you could add a media query to make the icons much bigger on small devices ( by changing the font-size property ).

    Sorry, I’m not really clear but as I don’t know your CSS skills it’s kind of hard for me to judge how precise I should be or not, so feel free to ask me for more details.

    Best regards,

    Thread Starter karenyoung1

    (@karenyoung1)

    Hi Thomas
    Thanks for your speedy response. I can find my way around CSS, but am unfamiliar with LESS, however I have google and I learn fast, so I will take a look tomorrow evening and see if I can figure it out from your pointers. I’ll look in the plugin files for mwl.less and open a copy in my text editor and see what I can change. I have a dummy site that I can experiment with so I don’t break the live site ??
    Best wishes
    Karen

    Hello Karen,

    Yeah LESS ( just like SASS, they are pretty similar ) are really convenient and really easy to use ! It shouldn’t take you long to learn the basics ( 15min ? ).

    Feel free to ask me if you have any other question !

    Best regards,
    Thomas

    Thread Starter karenyoung1

    (@karenyoung1)

    Hi Thomas

    Sorry for the delay in getting back to you. It took me a little longer than 15 minutes to figure things out. I couldn’t make sense of LESS (I don’t know SASS either), but was able to do the fix I wanted simply by editing mwl.css.

    I changed the font-size to 4em for all of the places that .control-nav appeared, even though I only really needed to change it for the .minimal option that I am using.

    Whilst I was there I also changed the right: for .control-next to 3% rather than 15px. I have noticed on my desktop that because my page involves a vertical scroll, the scroll bar was overlapping the next arrow on the right. That change also seemed to make things a little better with the mobile version, moving the arrow a little further from the edge of the screen.

    Perhaps it would be nicer if the icon didn’t need to be so big, but the clicking area was larger instead. There must be some way to do this, but I don’t have those skills yet. The size is fine for my purposes and it is good that only the navigation font has changed not the heading or the closing cross.

    If you would like to see it in action here is an example page: https://bernardbarnes.com/portfolio/fragments-of-devon/

    One thing if anyone else is looking at this thread for answers. I tried my edited mwl.css file on a dummy test site and it all worked fine. Then I used the same file on my live site and nothing changed. The dummy site and the live site are on different hosts. I eventually figured that the live host has some kind of caching at the server end, which I couldn’t clear without installing a cache plugin. It took quite a bit of googling to figure all of that out and make it work – hence the delay in reply.

    I’ll mark this as resolved now.

    Best wishes
    Karen

    Hello Karen,

    I’m really glad that you managed to solve you problem,

    Actually in the fix I’m trying to do right now the icon size shouldn’t change, only the clickable area, but I’m not done yet !

    I looked at your website, the icon size is not so disturbing since it’s only the navigation, however, you may want to use a media query so that navigation icons are big only on small screen ( ie. only when there is difficulties to navigate with smaller icons )

    Here is a link about media queries : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Feel free to open a new thread if you have any other questions or suggestions,

    Best regards,
    Thomas

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Next/Prev space too small on mob responsive view’ is closed to new replies.