Remove padding on mobile

Resolved

(@rolandbischoff)

Hi there,

is there any way to remove padding on mobile screens?

I disabled buttons on mobile,

/* Smartphones */
@media (max-width: 768px) {
    .pswp__button, .pswp__counter {
		display: none !important;
    }
}

so there is no need for the white space beside the image. The image should fill the available space of a mobile display.

I read https://photoswipe.com/styling/, but I don’t know how to implement JS on my site (I suppose the examples of Dmytro are JS, aren’t they?).

I think the padding I made in the plugin (Lightbox with PhotoSwipe > Theme > Image padding > 80px) are stored in this code:

var lbwpsOptions = {"label_facebook":"Share on Facebook","label_twitter":"Tweet","label_pinterest":"Pin it","label_download":"Download image","label_copyurl":"Copy image URL","label_ui_close":"Close [Esc]","label_ui_zoom":"Zoom","label_ui_prev":"Previous [\u2190]","label_ui_next":"Next [\u2192]","label_ui_error":"The image cannot be loaded","label_ui_fullscreen":"Toggle fullscreen [F]","label_ui_download":"Download image","share_facebook":"0","share_twitter":"0","share_pinterest":"0","share_download":"0","share_direct":"0","share_copyurl":"0","close_on_drag":"1","history":"1","show_counter":"1","show_fullscreen":"0","show_download":"0","show_zoom":"0","show_caption":"0","loop":"0","pinchtoclose":"1","taptotoggle":"1","close_on_click":"1","fulldesktop":"0","use_alt":"0","usecaption":"0","desktop_slider":"1","share_custom_label":"","share_custom_link":"","wheelmode":"zoom","spacing":"12","idletime":"3000","hide_scrollbars":"1","caption_type":"below","bg_opacity":"100","padding_left":"80","padding_top":"80","padding_right":"80","padding_bottom":"80"};

How can I access this? Can I change the padding for mobile with CSS?

Regards,
Roland

The page I need help with: [log in to see the link]

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

Plugin Author Arno Welzel
(@awelzel)

1 month, 1 week ago
By default there is no “white space” around the image. Also see my reference site: Lightbox with PhotoSwipe 5 (overlay caption) – WordPress Demo on a mobile device.

About the padding, which you can add if needed – this is passed as frontend variables by WordPress and you can not override this on your own as this is passed as parameter to PhotoSwipe and is not as CSS rule. Also see https://photoswipe.com/options/ – this explains all the options PhotoSwipe supports.

However if you want add a visual padding around the images just for desktop devices, a rule like this may work (I assumed the switch point for “mobile” is less then 480px but you have to decide what fits best for you):
```
@media (min-width: 480px) {
    .pswp__img {
        padding: 20px;
    }
}
```
Since the decision, what is “desktop device” is not that simple, there is no specific setting for this in the backend and PhotoSwipe itself also does not have any option to choose a specific padding for mobile devices only.
Thread Starter Roland Bischoff
(@rolandbischoff)

1 month, 1 week ago
Thank you, works fine as far as I see.

But I’ld like to present my photos with rounded corners – that doesn’t work
```
/* Desktop */
@media (min-width: 769px) {
    .pswp__img {
        padding: 80px;
        border-radius: 4px !important;
    }
}
```
Any idea why border-radiusdoesn’t work?
Plugin Author Arno Welzel
(@awelzel)

1 month, 1 week ago
The border and its corners are still the outer edge and not around the image itself, since “padding” means “add space between the content and the border”.

Adding a border radius which is bigger than the padding should work – you have to play around with the values to see what works best for you:
```
/* Desktop */
@media (min-width: 769px) {
    .pswp__img {
        padding: 80px;
        border-radius: 88px;
    }
}
```
And always keep in mind: customizations like this may not work with future updates of Photoswipe!
Thread Starter Roland Bischoff
(@rolandbischoff)

1 month, 1 week ago

Thanks a lot, that solved my problem. Otherwise I would have to go back to Photoswipe 4 …

One last question: Could you give me a hint, a starting point where I could learn how to use the options, Dmytro shows on https://photoswipe.com/options/?

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

You must be logged in to reply to this topic.

Tags