-
AuthorPosts
-
June 5, 2016 at 10:37 am #643108
Hallo enfold team,
I have a small problem, can you help me, please :-)
As you can see in the link 1 below, the 1/4 + 3/4 and the 2/5 + 3/5 cells are working great in one row.
However, the 1/3 and 2/3 cells aren’t working (link 1), because I use follwing code, for showing pictures in a nice grid (Link 2)div .av_one_third {
margin-left: 2%;
width: 32%;
}Can you help me, that the 1/3 + 2/3 cells are working again for link 1.
King regards,
June 6, 2016 at 7:20 am #643316Hi swa6768,
Please try the following in Quick CSS under Enfold–>General Styling:
.page-id-490 div .av_two_third { margin-left: 2% !important; }
Thanks,
RikardJune 9, 2016 at 5:00 pm #645563Hello Rikard,
thank you very much for the code, it’s working fine – for the desktop view.
However, for the mobile view of link 1, the header and the text are not on the same vertical line. Left of the Text, there are now (i think) the 2% margin-left.
Can you help me again, to bring these 2 elements on the same vertical line.
Thank you very much.Bye the way:
I use the code for the whole page, it look like that it works fine:
div .av_two_third {
margin-left: 2% !important;
}June 11, 2016 at 11:04 am #646511Hello again,
I solved the problem already by deleting the !important at the margin-left. Now it works fine :-) Also for the mobile version.
Now I’m nearly finished with that side – but one thing is sill not working:In Quick.css I use following codes, to design the spaces between the cells:
div .av_two_third {
margin-left: 2%;
width: 66%;
}
div .av_one_half {
margin-left: 2%;
width: 49%;
}
div .av_one_third {
margin-left: 2%;
width: 32%;
}
On Link 1, I try now to show one big picture (2/3 cells) next to 2 pictures (in a 1/3 cells, the lower picture has the style
.imagos {padding-top:2%;}
However, as you can see – at the bottom they are not on the same “line” – you see it better, if you are making the window smaller… Is it possible, that the big picture and lower picture of the smaller ones are one horizontal line.Thank you again for your great support.
June 12, 2016 at 4:17 pm #646937Hi,
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndyJune 13, 2016 at 2:11 pm #647385Hi Andy,
okay, it’s easier for me to show you my request with pictures :-)
The first 3 picutes (a big one and 2 smaller ones on the right side) are now coded. (Have a look at the code 2 postings before)
picture a: that’s a describtion of the problem above – the pictures are not on the same “line”.
picture b: Thats the way ist should be! The black arrows also show the spaces, which should be the same.Thank you again for your help,
June 13, 2016 at 5:09 pm #647527Hi,
use this code to adjust it:
.avia-image-container.avia-align-center { margin-bottom: 6px !important; }
and adjust as needed.
Best regards,
AndyJune 13, 2016 at 5:48 pm #647548Hi Andy,
thank you for the code – it is working, but the problem is, that the page should be responsive, and now, the pictures are not at the same heigth, when i resize the browser-window and make it smaller
Furthermore, the space between the pictures (black arrow at pictures b: are not the same).
Do you have any idea?Kind regards,
June 16, 2016 at 5:46 am #649001Hi,
Turn on the custom css class: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Edit the second image in the second column, add a custom css class attribute to it. Apply a max height to it. Example:
@media only screen and (min-width: 768px) and (max-width: 989px) { .custom-css-class img { max-height: 157px; } }
Best regards,
IsmaelJune 16, 2016 at 10:28 pm #649436Hi,
thank you for the reply, i tried the code, but sorry, it is not working. On the second (lower picutre) in the second column, therer was already a custon css-class: padding-top:2% (for the space between the tow pictues)
Have look at the result without this 2% padding-top at link 1. It’s also not working, if i use the 2% padding-top.
Is there a possibility, to solve this problem with a grid row (link 2)? I don’t know how to add the spaces between the picutes.
Thank you again for your great help,
June 17, 2016 at 4:56 pm #649887Hi,
we can’t open your second link. We need admin access for it. Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
AndyJune 19, 2016 at 12:08 pm #650403Hello Enfold Team,
thanks again for the great support. The result should be like in picure b:
http://silviawasner.at/?portfolio=hunger-auf-kunst-und-kultur
Please have a look, that the spaces between the pictures in mobile view are the sameregards,
- This reply was modified 7 years, 9 months ago by swa6768.
June 19, 2016 at 8:52 pm #650486Hi,
you did not follow Ismael’s instructions. I put “testimage” as custom class for the image in question and then put this code inside your Quick CSS field:
.testimage { max-width: 618px; width: 618px; }
Please confirm that it’s working for you now.
Best regards,
AndyJune 20, 2016 at 3:12 pm #650858Hello Andy,
thank you for the fast reply – i followed Ismael’s instructions but, it is the same problem now, that i had with the code. That’s why i changed back to my solution.
Now, if you resize the whole browser-window, the code is not working – the code is just working for one size of the browser window.
It is also not working in mobile view – also when resizing.
Can you have a look again, please. thank you, it looks like, that after that, all the problems are solved for this page.June 21, 2016 at 12:43 am #651149Hi,
then just use my code and add some media queries to it, for different browser screens, for example:
@media only screen and (min-width: 414px) and (max-width: 736px) { .testimage { max-width: 618px; width: 618px; }}
and adjust as needed.
Best regards,
AndyJune 21, 2016 at 11:05 am #651385Thanks for the reply,
I have the same problem, than before, it ist not working.
Please, have a look, what happend, when you resize the browser window. The smaller pictures “run over” the big picture.I think, different media queries will not work?
June 21, 2016 at 6:15 pm #651616Hi,
yes it will work. Please use different media queries, until it fits for you. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.