Melbourne Custom CSS

All the below snippets are related to the current theme. There is no guarantee that will work with your setup, as that strictly depends on your configuration.
To use the snippet just double-click the code, and copy it to your Custom CSS code option area.

Start typing what you're searching for. You can add multiple pieces of words separated by space:
Galleries - view entire image by making navigation block transparent
 /*Galleries - view entire image by making navigation block transparent*/
#swipebox-bottom-bar, #swipebox-top-bar {
    background: transparent;
On clicking the image, a popup will open, with bottom arrows. These arrows have black background by default, cropping the image.
Header Width
 /*Header Width*/
@media screen and (min-width: 46.875em){
    .flo_header {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
The following snippet will allow you reduce the width of the menu navigation for larger screens. Decrease of increase the width value.
Grid View Background Transparency
 /*Grid View Background Transparency*/
#swipebox-overlay {
    background: rgba(0,0,0,0.1);
The following CSS allows you to add transparency to the masonry grid gallery type. You can change the rgba values for a different color and transparency.
Grid View Background Color
 /*Grid View Background Color*/
#swipebox-overlay,#swipebox-bottom-bar,#swipebox-top-bar {
background: white;

/*If changing to white, you will want to change the arrows and close icons to black. */

#swipebox-close, #swipebox-next, #swipebox-prev {
color: black;
The following CSS allows you to change the background color of the masonry grid gallery type.
Max Height for Gallery on Mobile
 /*Max Height for Gallery on Mobile*/
@media screen and (max-width: 46.8125em) and (min-width: 0em){
.flo_slider .slick .slide img, .flo_slider .slick .slide {
    max-height: 32vh!important;

Increase the number 32vh to increase the sizing of the slider.