Remember me

centering thumbnails, adding navigation buttons

7 years 3 months ago #1

  • Martins's Avatar
  • Martins
  • Posts: 29
Hello!

Several questions.

1. How to center thumbnails? See img_1_1 and img_2_1




2. How to change pagination dot size in tablet view? See img_2_1


3. How to change thumbnail font size on hover in mobile view? See img_3_1
4. How to make navigation buttons the same size in mobile view? See img_3_1


5. How to add navigation buttons in lightbox on mobile view? See img_4_2

7 years 3 months ago #2

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need to remove the space between thumbnail




you need to change to 1 number of columns for tablet and phone


You need at the CSS Editor to add code:
@media (max-width: 768px) {
	/* changing these values you change dots size */
	.com_bagallery .ba-pagination a.ba-btn.ba-dots{
		height: 10px !important;
	    width: 10px !important;
	}

	/* changing these values you change thumbnail font size */
	.ba-gallery-grid .ba-caption h3,
	.ba-gallery-grid .ba-caption p.image-category,
	.ba-gallery-grid .ba-caption p.short-description {
		font-size: 10px!important;
	}

	/* show navigation buttons */
	.gallery-modal.in + input + .modal-nav {
	    display: block !important;
	}
}

Regards,
Vyacheslav, Balbooa.com

7 years 3 months ago #3

  • Martins's Avatar
  • Martins
  • Posts: 29
Hello!

I pasted that code. Two issues.

1. Navigation arrows don't work in lightbox on mobile phone. Buttons appear, but do not function.
2. Something strange with dots and arrows in mobile view.

7 years 3 months ago #4

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need at the CSS Editor to add code
@media (max-width: 768px) {	
	.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-prev span,
	.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-next span {
	    display: block;
	    line-height: 11px!important;
	    margin: 0 3px;
	}

	.ba-modal.gallery-modal .ba-modal-header {
    	height: 50px !important;
    	box-shadow: inset 0px 130px 75px -125px rgba(0, 0, 0, 1) !important
    }

	.ba-modal.gallery-modal .header-icons{
    	padding-top: 0!important;
    	box-shadow: rgba(0, 0, 0, 1) 0px -85px 75px -85px inset !important;
    }

	.gallery-modal .ba-modal-header .zmdi {
	    padding: 10px 5px!important;
	}

	.gallery-modal .ba-like-wrapper {
    	padding-top: 10px!important;
    }

}

Regards,
Vyacheslav, Balbooa.co

7 years 3 months ago #5

  • Martins's Avatar
  • Martins
  • Posts: 29
Hello!

1. Issue with navigation arrows in lightbox still remains?



I am using samsung galaxy s3 smartphone

2. i made dots a bit bigger using the code you gave me, but dots are not centered.

7 years 3 months ago #6

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
You need to find the code from the previous post
.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-prev span,
.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-next span {
    display: block;
    line-height: 11px!important;
    margin: 0 3px;
}

and line-height replace to:
line-height: 17px!important;

and add code:
.modal-nav {
    top: 50% !important;
    z-index: 10!important;
}

Regards,
Vyacheslav, Balbooa.com

7 years 3 months ago #7

  • Martins's Avatar
  • Martins
  • Posts: 29
1. Navigation buttons in lightbox work. how to change the background? Now it is black. I want it to be transparent.
2. Still something wrong with dots and arrows. Is it my phone or can it be fixed?

7 years 3 months ago #8

  • Viacheslav's Avatar
  • Viacheslav
  • Posts: 28858
Hello,

You need at the CSS Editor add code
@media (max-width: 768px) {	
	.modal-nav .zmdi-chevron-left,
	.modal-nav .zmdi-chevron-right {
	    background-color: transparent !important;
	}
}
@media (max-width: 480px) {	
	.ba-item-gallery .com_bagallery .ba-pagination a.ba-btn.ba-dots {
	    height: 22px !important;
	    width: 22px !important;
	    border-width: 0 !important;
	}

	.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-prev span,
	.ba-gallery .ba-pagination a.ba-btn.ba-dots.ba-next span {
	    border-radius: 50%;
	    border: 1px solid #ccc;
	    height: 20px;
	    width:20px;
	}
}

Regards,
Vyacheslav, Balbooa.com

7 years 3 months ago #9

  • Martins's Avatar
  • Martins
  • Posts: 29
Sorry to bother again...

lightbox navigation buttons work fine. it is solved. :)

but...dots and arrows...without any changes...there is still issue as it was (in last picture i sent).

7 years 3 months ago #10

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hello,

The browser you are using is supported and updated?! Why I'm askin, because we have tested on all available android devices in our office: Nexus and Meizu and navigations looks fine, here are screens:



7 years 3 months ago #11

  • Martins's Avatar
  • Martins
  • Posts: 29
Well..i am using Android 4.3. And it is updated.
Ok...maybe it is phone issue...so be it. :) it is Samsung galaxy s3 GT-I9300
Powered by Kunena Forum