Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1271268

    I´ve created a Masonry Gallery for one page but it doesn´t work good in mobile devices. The text looks too big in horizontal, so you just can´t read it… I´ve been trying to make it smaller with css but it looks the same.

    Fullwidth Easy Slider captions are also working bad for mobile devices in horizontal, since framed caption looks too big, but in vertical looks fine. Wonder if there is a way to adjust this.

    #1272025

    Hey Rocuant,

    Thank you for the inquiry.

    The css modifications may not be working immediately or not taking effect because the Performance > File Compression settings are enabled. Please try to disable the settings temporarily to refresh the stylesheets.

    To adjust the font size of the masonry item title, try to use this css code.

    #top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    	font-size: 1em;
    }
    

    For the slideshow caption title, use this css.

    .avia-slide-wrap h2 {
    	font-size: 18px;
    	line-height: 1.2em;
    	margin-bottom: 10px;
    }
    

    You may also need to adjust the width of the slideshow caption container.

    .slideshow_caption {
    	width: 60%;
    }
    

    The width is currently set to only 42% of the parent container.

    Best regards,
    Ismael

    #1272821

    The captions for masonry gallery still look too large on mobile devices, in horizontal position, because vertical looks fine. ¿Is there a way to reduce them? I`ve changed values in css but there is no change on mobile devices.

    #1273315

    Hi,

    Thank you for the update.

    We have added the following code in the Quick CSS field to adjust the font size of the masonry title.

    @media only screen and (max-width: 1024px) {
    	/* Add your Mobile Styles here */
    	#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    		font-size: 1em;
    	}
    }
    

    Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    #1273351

    Thank you, homepage works fine. ¿How can I make the same for the page “Tratamientos”? Also for mobile devices

    #1273523

    Hi,

    Add this to quick css:

    Mobile styles:

    @media only screen and (max-width: 757px) {
    	/* Add your Mobile Styles here */
    	#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    		font-size: 1em;
    	}
    }

    Tratamientos Page:

    @media only screen and (max-width: 1024px) {
    	/* Add your Mobile Styles here */
    	#top.page-id-500 .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    		font-size: 1em;
    	}
    }

    Best regards,
    Jordan Shannon

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.