Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #1224271

    Hi guys,
    I read other tickets about but I was not able to work it out.

    See this page: https://www.viverelondra.com/servizi
    The orange buttons: I would like to put them at the bottom of the column at the same height of all the other buttons of the other columns. The code should apply only to desktop view.

    Could you please assist?

    Regards,
    Marco

    #1224369

    Hey marcoabis81,

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

    @media only screen and (min-width: 1025px) {
    .page-id-16223 #av_section_2 .av_one_third section.av_textblock_section {
      min-height: 190px;
    }
    }

    Best regards,
    Rikard

    #1224445

    Hi Rikard,

    thank you or your answer. However I think my question was about the orange buttons.

    I would like the buttons to be at the same height on each box. Basically all the button to stick at the bottom of each box like this >>>>
    2020-06-21_2151

    thanks
    Marco

    #1224488

    Hi,

    Did you try the CSS I posted? I can’t see it applying on your site.

    Best regards,
    Rikard

    #1224550

    Hi Rikard,

    I tested it, I saw it was not working and I removed it.

    I put it back now, still, buttons do not go in the bottom of the box.

    Thanks,
    Marco

    #1224766

    Hi,

    Here’s what I’m seeing when I apply the CSS on your site: https://imgur.com/a/UrsWDXd. You have active caching on the site, did you clear that?

    Best regards,
    Rikard

    #1224822

    Hi Rikard,

    Yes, I cleared the cache.
    Are you testing the home page? The home page has an ID page number 2 but I see you are using a different ID page. Is it because you are testing it in your environment so it gets a different ID page?

    Anyway, I changed it with ID page 2, claread the chace and still nothing.
    2020-06-23_1038

    Marco

    #1225006

    Hi,

    I’m looking at the page you linked to in your first post: https://www.viverelondra.com/servizi, and the page id is correct in the code for that page. Maybe you could try removing the page id class from the code?

    Best regards,
    Rikard

    #1225112

    Hi Rikard,

    Is it possible you are looking at this https://www.viverelondra.com/servizi page? The buttons are orange while you display them red.

    I noticed more than once that I have difficulties in overwriting the CSS code. And it takes sometimes days before the changes take effect. Or sometimes they never take effect. I see the old code from the google inspect element while the CSS I have put in the quick CSS is different.

    If you check the color of each button from inside the WP panel of the page “i nostri servizi” you will see that each button is set to be orange. I see them orange from my side.

    I restore the ID page 16223 and it does not work. And if I remove the ID page this will apply to all pages eventually? tried and it does not have any effect on the buttons.

    Thanks,
    Marco

    #1225417

    Hi,

    Yes, that is the page I’m looking at. The problem with applying CSS might have something to do with you having active caching on your site. What happens if you clear the cache and disable the plugin or service which is caching your content?

    Best regards,
    Rikard

    #1225418

    i would give a custom class to the section it concerns – i have now only the code for you site specific and with the section ID:
    to address the colorsection it concerns it might be nice to have a unique selector.

    #top.page-id-16223 #av_section_2 .avia-button-wrap {
      position: absolute;
      bottom: 10px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    
    #top.page-id-16223 #av_section_2 .av_textblock_section {
      padding-bottom: 30px;
    }
    #1225451

    Rikard hi,

    It is not about the cache probably (which anyway I cleared more than once).

    You are seeing red buttons while my site has orange buttons. I believe you are seeing an old copy of my site (in fact one week ago I had red buttons) :-)

    I tried Guenni’s code and it has worked at first, same caching plugin, same settings.

    Not sure why I cannot implement your code Rikard.

    Marco

    #1225458

    Thank you Guenni, I tried it and it works perfect :-)

    Can I ask 1 question?

    1) I understand that if I want to use the same code on a different page, I have to change 2 things: the ID page and the section number.
    I would like to re-use this code on page ID 2 (my home page http://www.viverelondra.com) at the av_section_6

    However, I was not able to make the code work. Am I wrong in something?

    Thanks
    Marco

    • This reply was modified 10 months, 3 weeks ago by  marcoabis81.
    #1225506

    That is the reason for:

    i would give a custom class to the section it concerns

    you give a custom class f.e. to the color-section where all those columns are in. Then the selector is the trigger for using this code.

    .avia-section.custom-class .avia-button-wrap {
      position: absolute;
      bottom: 10px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    
    .avia-section.custom-class .av_textblock_section {
      padding-bottom: 30px;
    }

    so whenever you come to an same setting you only had to give that custom-class to the color-section to which the columns belong.
    But it has to be the same setting. You see that a little padding is given to the last but one element in the column to have distance to the absolut positioned buttons. If this is something different than a textblock you had to adjust this.

    by the way – same setting – on your home page are these columns in the second line real equal height columns ?

    #1225591

    Hi Guenni,

    Yes same settings on the home page, same height columns.

    i understand now why you mentioned the

    i would give a custom class to the section it concerns :-)

    However, I did not manage to get the result with the custom class.

    Here is how I set it up:

    /* Buttons same height SERVIZI page */
    .avia-section.box-servizi .avia-button-wrap {
      position: absolute;
      bottom: 20px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    
    /* Buttons same height SERVIZI page */
    .avia-section.box-servizi .av_textblock_section {
        padding-bottom: 60px;
    }
    

    2020-06-25_1552

    Thanks,
    Marco

    #1225745


    if two classes are needed here on that input-field there had to be no dot between the classes – The input field will add it to the element as classes just without dot only with one space between each class.

    but the class avia-section is allready there so for you only : box-servizi – no dot before that will be done by enfold

    ___________

    the second row of coulumns is not set to equal height !
    the first column on the left gives the setting for the rest in the line. Even if you have 8times 1/4 columns- you had to set all left columns.
    And even worse, should you ever rearrange the columns and move a column from back to front, you’ll have to edit that column again. Otherwise, it’ll default to the default settings.

    • This reply was modified 10 months, 3 weeks ago by  Guenni007.
    #1225763

    Amazing,

    it works :-) :-)

    Very much appreciated Guenni.

    Just a technical question. The first part of the class https://www.screencast.com/t/pDyIgMYBabxZ has to be called >>> .avia-section or can I simply use the second part of the custom class name that I want?

    Have a great day.

    Marco

    #1225781

    but the class avia-section is allready there so for you only : box-servizi – no dot before that will be done by enfold

    avia-section is the standard class for all Enfold color-sections.
    a custom-class is added to the section so on css rules there will be no space between them and the dot is the separator on that

    .avia-section.custom-class { … }

    I have included the standard class in the rules to keep a better overview. So you can see directly in the Quick css that it is a rule which is applied to an element within a color-section.

    but in the input field of the Adavanced Laoyut Builder Element ( color-section etc. pp) there should not be a dot but if you like to add multiple classes to the element – separated by a space.

    • This reply was modified 10 months, 3 weeks ago by  Guenni007.
    #1225788

    Best would be to get familiar with developer tools of the browsers. Most ( i guess all ) have them implemented.
    You can show with your mouse on a part of your page and via kontext menu ( often the right mouse button ) you can then choose “inspect” or similar.

    Using the developer tools you can examine the site very well. Where which IDs or classes are; whether an element is a child element or a neighbour etc. pp.
    So when I look at your page now, I see that you have unnecessarily reassigned this default class to the color-section. This doesn’t bother in this case, but is obsolete. I can see that you have given the class home-box this time.

    this is what i see if i inspect the color-section of your homepage:
    click to enlarge the image:

    #1225793

    see here an example where it is usefull to have two custom classes on a given element.
    i have created a glassy 3D looking styling for Enfold Buttons. The one custom-class is for the styling option ( glass ) the other custom-class is for the color effects ( green , blue, red etc. pp )
    When i want to style now an Enfold Button ( light-transparent ) i only had to set these two classes to the button element.
    Input field is than on custom-class: glass blue
    https://webers-testseite.de/buttons/

    #1225802

    Hi Guenni,

    Yes, it is in the Google inspect that I found that it was the color section number 6. Right yesterday I was wondering how you could guess that the color section was the number 2 so I started browsing the developer tools and found that you can actually get these info there :-)

    So when I look at your page now, I see that you have unnecessarily reassigned this default class to the color-section. This doesn’t bother in this case, but is obsolete. I can see that you have given the class home-box this time.

    This is what I was trying to understand yesterday when I sent you this screenshot. https://www.screencast.com/t/pDyIgMYBabxZ I wanted to understand if the default class was something that I had to use or I could avoid to add it before the custom class name and you just cleared my doubts now: I can avoid to write the default class and write directly the custom one.

    Thanks for being this kind and explaining me all this :-)

    Appreciated,
    Marco

    #1226022

    Hi Marco,

    Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1226049

    Hi Rikard,

    you can close the ticket.

    Thank you for the support :-)

    Marco

    #1226123

    Hi Marco,

    Great :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.

    Best regards,
    Victoria

Viewing 24 posts - 1 through 24 (of 24 total)

The topic ‘Put buttons at the bottom of the columns’ is closed to new replies.