Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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,

    #643316

    Hi swa6768,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .page-id-490 div .av_two_third {
        margin-left: 2% !important;
    }

    Thanks,
    Rikard

    #645563

    Hello 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;
    }

    #646511

    Hello 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.

    #646937

    Hi,

    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,
    Andy

    #647385

    Hi 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,

    #647527

    Hi,

    use this code to adjust it:

    .avia-image-container.avia-align-center {
    margin-bottom: 6px !important;
    }
    

    and adjust as needed.

    Best regards,
    Andy

    #647548

    Hi 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,

    #649001

    Hi,

    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,
    Ismael

    #649436

    Hi,

    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,

    #649887

    Hi,

    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,
    Andy

    #650403

    Hello 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 same

    regards,

    • This reply was modified 7 years, 9 months ago by swa6768.
    #650486

    Hi,

    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,
    Andy

    #650858

    Hello 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.

    #651149

    Hi,

    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,
    Andy

    #651385

    Thanks 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?

    #651616

    Hi,

    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

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