-
Posts
-
Hi,
I use a number of 1/2 dividers within color sections on my website. When I put a button at the bottom of a 1/2 layout that’s on the left side, it appears in the middle of the section on mobile device-size screens, and the right side of the 1/2 layout appears underneath that. Is there perhaps a bit of quick CSS that makes it so the buttons will appear at the bottom of the section below the right side 1/2 layout on mobile device screens?Sure – it’s http://kirbyskin.com. If you go to the middle sections on http://kirbyskin.com/product-technology/ on a mobile device you’ll see that the buttons appear in the middle of the sections. This is because they’re on the left side of 1/2 page sections. I want to keep them on the left side because it looks better on desktop sizes but I would like it so these buttons appear on the bottom of the sections on mobile devices. Is this possible?
Hey!
Sorry for the late reply!
Elements are displayed in HTML order and the button that is on the bottom of left column will always be displayed before the right column. The simplest way would be turning on custom CSS field for ALB element ( please see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and giving your buttons that are at the bottom of left 1/2 column element a custom class ( for example: custom-desktop-button ) and add an extra button with the same link to bottom of right 1/2 column with a unique class ( for example: custom-mobile-button ). And using following code in Quick CSS in Enfold theme options under General Styling tab, you can display the left button on desktop while keep extra button hidden, and hide left button on mobile and display extra button instead@media only screen and (max-width: 768px) { .custom-desktop-button { display: none!important; } .custom-mobile-button { display: block !important; }} @media only screen and (min-width: 769px) { .custom-mobile-button { display: none !important; }}Regards,
Yigit
- The topic ‘Move buttons to bottom of color section on mobile devices’ is closed to new replies.