Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 23, 2018 at 3:39 pm #1013334
    P3T3R_0ne

    Hi,

    sorry, but I cannot center a masonry gallery which by default is aligned to the left.

    I have put the gallery into a color section, gave the color section an ID and used the ID to try align the whole section center, but it did not work. In the forum I found this code:

    #3-main-sqs .entry-content-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
    }

    where my ID name is “3-main-sqs”. However, applying this code did not do the job.

    General question: Whats the process of aligning any element center with enfold?

    September 24, 2018 at 4:13 pm #1013687
    Ismael

    Hey P3T3R_0ne,

    Thank you for using Enfold.

    Have you tried to adjust the masonry column settings to “3”? Are you planning to add more items to the masonry element? You can set the columns to 3, move the masonry element inside a 3/5 column and then add two 1/5 columns on both sides. This will place the masonry at the center of the color section.

    Best regards,
    Ismael

    October 1, 2018 at 2:11 pm #1016637
    P3T3R_0ne

    Hi Ismael,

    Your suggestion don´t do the job. I have set masonry column settings to 3. and I have put the element into a 3/5 column with 1/5 left and right. The 3 columns are aligned to the left tough. Also the masnory elemnt gets smaller which I don´t want.

    Probably, the whole color section is aligned left. However, I could not come up with css code to align content center. It should not be a difficult task.

    October 2, 2018 at 7:22 am #1016912
    Ismael

    Hi,

    Looks like you’ve managed to do it using the column elements. I also noticed that you’re using the Gutenberg editor. Please note that the theme’s advance layout builder is not compatible with it, so you should be better off using the classic editor.

    Best regards,
    Ismael

    October 2, 2018 at 1:25 pm #1017038
    P3T3R_0ne

    Hi,

    I have come up with a complete different solution not using masnory. I still would like to know how to center content/media elments properly though.

    About Gutenberg, I have it installed to check it out but I always work on pages with the classic editor and avia. Thanks for pointing that out ;)

    October 2, 2018 at 2:10 pm #1017070
    P3T3R_0ne

    I also have other questions.

    How can I ensure that the logo on mobile is always centered? I came up with a dirty way applying this css:
    @media only screen and (max-width:767px) {
    #header_main > div.container.av-logo-container > div > span > a > img {
    position: relative;
    right: -135px;

    However, depending on the device being used it´s not always in the center. What is a better way to do it?

    Also, how can I ensure the socket is always the the bottom of the page?
    To make that happen I applied a padding-bottom to the last element of the page and gave the socket a bigger min-height. However, depending on the screen size this does not always ensure that the #socket is always at the bottom. If padding or min height is too big it looks bad on some screen sizes because the space is just too big.
    What is a smart way to achieve that?

    Thank you for the support.

    October 3, 2018 at 8:55 am #1017397
    Ismael

    Hi,

    Thanks for the update.

    Replace the previous modification with the following css code to center align the logo on mobile view. 

    @media only screen and (max-width: 767px) {
.responsive #top .logo > img {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
}

.responsive #top .logo {
    width: 80%;
}
}

    I’m not really sure what’s going on with the socket. Did you check it on an actual mobile device?

    Best regards,
    Ismael

    October 4, 2018 at 1:05 pm #1017873
    P3T3R_0ne

    Hi,

    the css you sggested does not apply. I have tried various changes but it does not work. Can you please check

    October 8, 2018 at 1:51 am #1018742
    Ismael

    Hi,

    The css code works when I add it via the browser inspector. Please set the user role to “admin” so that we can access the theme options.

    Best regards,
    Ismael

    October 8, 2018 at 9:22 am #1018871
    P3T3R_0ne

    Hi,

    ok, I have set the role to admin for you to investigate…

    October 9, 2018 at 4:47 am #1019304
    Ismael

    Hi,

    I’ve added the css code on the Quick CSS field. I had to disable the cache plugin temporarily to regenerate the scripts and stylesheets. Enable the cache plugin back once you’re completely done with the site.

    // https://imgur.com/a/NcQ0B7j

    Best regards,
    Ismael

    October 10, 2018 at 12:17 pm #1019907
    P3T3R_0ne

    Hi Ismael,

    thank you. The logo is centered now :)

    However, apparently this part of the code does not apply:
    .responsive #top .logo > img {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);

    It works because of this selector:
    .page-id-97 #header_main > div.container.av-logo-container > div > span > a > img {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    }
    The logo is not centered anymore when this last bid of code is removed.

    Thank you anyway.

    October 11, 2018 at 3:53 am #1020124
    Ismael

    Hi,

    Alright. I’m not really sure why the first css declaration is not working. Glad that you figured it out. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

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