-
Posts
-
Hello
I want to display 6 keywords in three rows and two columns like this:
—————— ——————– ——————–
keyword 1 keyword 2 keyword 3
—————— ——————- ——————-
keyword 4 keyword 5 keyword 6
—————— ——————- ——————–A line on top, between and below each entry. The lines should still work on am mobile device, where the entries are listed below each other.
My problem is that the spacing between the text and the lines is too big if I use three 1/3 column sections. If I enter every line and text in a seperate 1/3 section, the spacing is much better (as required) but on mobile device, the lines and keywords are mixed up (first the three lines, then three keywords, then three lines ….
Can you show me a way to have little spacing (height) that works on mobile devices?
Many thanks in advance.Hi Reto,
Can you give us a link to the page mentioned? so we can try to give accurate CSS to match what you’re trying to achieve.
Best regards,
NikkoHi Nikko.
Please see link in private content. The section I am referring to starts with the entry “PERSONALIZED & DISCRETE APPROACH”.
There are two times six entries. The second set looks fine on a desktop. But not at all on a mobile device.
Best regards, RetoHi retom,
Thanks for providing the link and admin access.
I have made changes on the link you gave.
These are the things I did on that page:
1. Add a Color Section and gave it a Custom CSS Class: special-section
2. Added those 1/3 columns and the contents
3. On the last separator of the first and second columns, I have set it’s Element’s Visibility to Hide on very small screens
4. Finally, in Enfold > General Styling > Quick CSS, I have added this CSS code:.special-section p { margin: 0; } @media only screen and (max-width:479px) { .responsive #top #wrap_all .special-section .flex_column { margin-bottom: 0; } }Please review your site.
Best regards,
NikkoHi Nikko, thank you for your help! This looks a lot better than what I had before.
When I reduce the width of the screen, the 1/3 columns are aligned below each other already on “small screens”. Because of that, I have hidden the last separator of the first and second column also on “small screens”. This looks good regarding the separator, but the spacing is too big and is only reduced, once the screen is very small. Could you please help with this last small issue?
Best regards, RetoHi Reto,
Yes, I’ll be happy to help.
Can you give us a screenshot on the issue you mentioned? I could not seem to see it on my mobile phone.
You can upload the screenshot in dropbox or https://imgur.com/ and then post the link here.Best regards,
NikkoHi Nikko
Sorry for the late reply! Please find the link in the private section.
– Screenshot 1: large screen (columns are displayed in one row) -> OK
– Screenshot 2: small screen (columns are displayed below each other, but vertical spacing is not as we would like – see red markings) -> TO BE IMPROVED
– Screenshot 3: very small screen (columns are displayed below each other with identical spacing) -> OKCan you help with this?
Talking about spacing I have one more question: Further down the website the is a header “Services” and below four Columns with fullwidth buttons. On hover over, the button changes its background color. I would like that the lines above and below the buttons has no spacing to the button. But now there is a spacing. Can you help me with reducing the spacing to 0, so that the line and the button “touch” each other?
Regards, Reto
Hi Reto,
Thanks for the screenshots.
I have replaced this part of the code:@media only screen and (max-width:479px) { .responsive #top #wrap_all .special-section .flex_column { margin-bottom: 0; } }with:
@media only screen and (max-width:767px) { .responsive #top #wrap_all .special-section .flex_column { margin-bottom: 0; } }Please review your site.
Best regards,
NikkoMany thanks Nikko, now it looks and behaves exactly as I wanted!
Could you help me with this other problem?
Further down the website the is a header “Services” and below four Columns with fullwidth buttons. On hover over, the button changes its background color. I would like that the lines above and below the buttons has no spacing to the button. But now there is a spacing. Can you help me with reducing the spacing to 0, so that the line and the button “touch” each other?Regards, Reto
Hi Reto,
Please try to add this CSS code:
.page-id-3290 #after_section_6 .hr-custom { min-height: 1px; line-height: 1; margin-bottom: -2px; } .page-id-3290 #after_section_6 .hr-custom .hr-inner { margin-bottom: -5px; } .page-id-3290 #after_section_6 .avia-button-wrap ~ .hr-custom .hr-inner { margin-bottom: 0; margin-top: -13px; }Best regards,
NikkoHi Nikko
Many thanks this works perfectly! Is there an easy way to make the reference dynamic instead of “#after_section_6”?
Best Regards, RetoHi Reto,
Yes, you’ll just need to put it inside a Color Section and then add a Custom CSS Class to it.
Then replace .page-id-3290 #after_section_6 with #top .yourclass (just replace yourclass with the class name you added).Best regards,
Nikko
- The topic ‘How to reduce hieght of columns’ is closed to new replies.