Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1145010

    Hello to all,

    I actually have a full width slider for mobile and a full screen slider for large screen but it is not a real good solution.
    I would like to keep full width slider for mobile and have a canvas instead of full width on large screen.

    I would like to have a canvas like the website in private which can be resize in relation with the viewport and keep my menu and logo banner at the same place than actually on my home (in fact i just want to remplace slider by responsive mozaic canvas)

    Do you have an idea to do that ?

    Thanks for helping,
    Cheers !
    Iceman

    • This topic was modified 5 years ago by ICEMAN.
    #1145111

    Can someone help me find a solution to make this responsive mosaic ?

    #1145297

    Hi ICEMAN,

    Best regards,
    Victoria

    • This reply was modified 5 years ago by Victoria.
    #1145347

    Nice to hear you Victoria,

    You are right, that’s not responsive but I like the idea so I would like to find a responsive solution in that way.

    Thanks Victoria,
    Regards,
    Iceman

    #1145376

    Hi Iceman,

    Well, you could use the full-width masonry. I could give the mosaic but it cannot really be used with a single caption on top of it and cannot really be used for the header transparency.

    Best regards,
    Victoria

    #1145433

    Ok Victoria, I will try with masonry.
    I come back to you for feedback.
    Have a nice day !
    Regards,
    Iceman

    #1146134

    Thanks Victoria.
    With Masonry solution,Is it possible to :
    – deactivate magnification effect overflight
    – always having complete lines
    – set a fixed height like the full screen slider
    – Having my banner with logo and menu at the same actual place on my home)

    • This reply was modified 5 years ago by ICEMAN.
    #1147226

    Hi ICEMAN,

    Well, you could add 3 more images, but it will still be difficult to make it work.

    Try adding this css:

    
    .page-id-3128  .av-masonry-entry.av-masonry-item-loaded {
        pointer-events: none;
    }
    

    Best regards,
    Victoria

    #1147787

    Thanks for your kindness Victoria !
    It works well for the moment.

    But I have a trouble with masonry.
    Look results in private: If I replace slider by masonry on large screen, even if I use just one photos, the total page size difference is about 2Mo so it’s mean that masonry weight (with just one photo) is about 2 Mo. It’s huge !
    What do you think about ?

    Regards,
    Iceman

    • This reply was modified 5 years ago by ICEMAN.
    #1148760

    Hi,

    If I replace slider by masonry on large screen,

    Sorry. We are not entirely sure what you meant by that. What did you replace?

    Looks like your images are not fully optimized. Even the thumbnails that are 200px in width amounts to 110KB in file size. They should be at most 30KB or less (see private field). The instructions in the following article should help you optimize the images.

    // https://kriesi.at/archives/4-key-wordpress-image-optimization-tips
    // https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow

    Best regards,
    Ismael

    #1154023

    Hi Victoria,
    1— I try your solution to deactivate magnification effect overflight but it doesn’t work, I try some other things but without success…
    Does anyone have a solution ?

    2— I would like to know exactly the size and weight of the first image (top left ) of my masonry when it displays and the loading size and weight.

    Thanks in advance
    Regards,
    Iceman

    #1154386

    Hi ICEMAN,

    Masonry height and position are calculated in JavaScript and so they are not known beforehand.

    What magnification are you referring to?

    Best regards,
    Victoria

    #1159827

    Hi Victoria,
    Hope you are doing well :)
    I talk about magnifying glass effect over mouse
    Regards
    Iceman

    #1161789

    Hi,

    Thank you for the info.

    Try to use this css code to remove the zoom in effect.

    .avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    	-webkit-transform: none;
    	transform: none;
    }

    Best regards,
    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.