-
Posts
-
Hi!
I use the Partner/Logo Element on 3 columns for desktop view and I duplicated it to have the logos on 2 columns on screen smaller than 990px. But at 968px, it keep them on 1 column.
So I use this code, which I found on your forum, but it doesn’t work properly when you look at it on the private link below. The second bloc is divided 2 by 2 vertically…
@media only screen and (max-width: 969px) {
.avia-content-slider .slide-entry-wrap {
width: 50%;
margin-bottom: 40px !important;
margin-left: 0% !important;
}}Can you help?
Hey Genevieve,
Please try this instead:
@media only screen and (max-width: 768px) { .avia-content-slider .slide-entry-wrap { width: 50%; margin-bottom: 40px !important; margin-left: 0% !important; }}Best regards,
RikardHi Rikard,
This doesn’t fix the problem, it’s even worse because it turns everything on one single row between 768px and 969px.
The problem is the way images align on smaller screen (see private link). Instead of putting the images side by side, it put them one on top of each other 2 by 2. Compare the order of the images on full screen and it will help you understand!
Thanks!
Hi metamorfic,
How do you want them on mobile screen and on screen 768-989px?
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaOk, I put back my code which fix the problem between 970px and 989px.
@media only screen and (max-width: 969px) {
.avia-content-slider .slide-entry-wrap {
width: 50%;
margin-bottom: 40px !important;
margin-left: 0% !important;
}}I made 4 images which explain what is ok and what is not:
http://timoussedansbrousse.com/wp-content/uploads/2018/06/990-and-more-good.png
http://timoussedansbrousse.com/wp-content/uploads/2018/06/970-989-good.png
http://timoussedansbrousse.com/wp-content/uploads/2018/06/969-and-less-bad.png
http://timoussedansbrousse.com/wp-content/uploads/2018/06/969-and-less-good.pngLet me know if that help?
Hi metamorfic,
Thank you for the screenshots, they do help.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi metamorfic,
Could you please enable the Advanced Layout Builder debug mode. Here is how to do it:
I don’t think you need to change the number of columns and have double elements, just let them scale as they are and then maybe adjust them via css.
I would like to make a test page with these elements.
Best regards,
VictoriaHi Victoria,
I enabled the debug mode but my client is changing her web hosting right now, so we should wait until it’s done to be safe. I’ll let you know when it’s done so we can continue!
Thanks!
Ok! The transfert is completed! We can now continue!
I had to add to logos to the last section so here what the order should looks like on small device for that section:
https://timoussedansbrousse.com/wp-content/uploads/2018/06/Screen-Shot-2018-06-28-at-9.27.15-AM.pngThanks
No, I Photoshop the screenshot to show how it should looks like. But if you go on the website, it’s not like that!
Hi,
I tested on an iPAD and I can see 2 columns, which is what you requesting right?
Best regards,
BasilisHi Basillis,
It is on 2 columns because I forced it, but the order of the logos changes as per the 3 columns and there is a space between the 4th and 5th ones. It’s like they go 2 by 2 but on top of each other instead of beside each other. It’s so hard to explain! I don’t know how to explain it anymore!
Hi,
This is what I see on the mobile view.
I notice the three blocks “Founding partners”, “Official partners” and “Supporters”.
If it is hard to explain please upload a screenshot/mockup of the end result you are looking for to one of the below sites and share the link here so we can help you better :)
https://snag.gy/
https://ctrlv.cz/en/
https://imgur.comBest regards,
VinayHere how it should looks like:
https://snag.gy/x8M1WB.jpg
https://ctrlv.cz/aEcJHere is the css code I use:
@media only screen and (max-width: 969px) {
.avia-content-slider .slide-entry-wrap {
width: 50%;
margin-bottom: 0px !important;
margin-left: 0% !important;
}}Hi,
One of the element was not set up correctly. I have removed it and checked the page on desktop and mobile it appears correctly on my end.
Please clear the cache and review the page :)
Best regards,
Vinay
- You must be logged in to reply to this topic.