Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 12, 2015 at 12:41 am #394789
    adamgelston

    I have two side by side buttons on my site. They are in the middle two of a row of 4 1/4 layout element boxes(the two outer 1/4 boxes being empty) When the browser window width reaches approximately 970px the two buttons align asymmetrically. But upon continuing the resizing they stack on top of one another at approx 740px width. Is there a way to have them simply stack on top of one another at the 970 mark and eradicate the grey area where they are unsymmetrical?

    February 12, 2015 at 5:36 pm #395178
    Elliott

    Hey adamgelston!

    Can you send us a link to the page? You can set your reply as private if you wish.

    Regards,
    Elliott

    February 13, 2015 at 12:27 am #395443
    adamgelston

    I’m afraid it’s a localhost so no link… some screenshots might help perhaps?

    the normal layout of the site in full size
    image 1

    the asymmetrical layout
    image 2

    the buttons on top of one another
    image 3

    the layout in the layout builder
    image 4

    • This reply was modified 9 years, 10 months ago by adamgelston.
    February 13, 2015 at 1:23 pm #395678
    Yigit

    Hey!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.page-id-59 .av_one_fourth { display: none !important; }}

    You should change the page id to match your pages id. You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg

    Best regards,
    Yigit

    February 13, 2015 at 2:54 pm #395762
    adamgelston

    I’ve played around with that and it simply makes the buttons disappear at the specified pixel width in the code…. the buttons align asymmetrically at 890px and then align on top of each other at 767px. What I want to do is have them align on top of each other at the 890px width, and eradicate the area between 890 and 767 where they are unsymmetrical.

    February 15, 2015 at 1:12 pm #396364
    Ismael

    Hey!

    Try to place the elements inside a color section then add unique id attribute using the For Developers: Section ID field. Use “custom-section” for example. Add this to the Quick CSS field:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive #custom-section .av_one_half.first + .av_one_fourth, .responsive #custom-section .av_one_half.first + .av_one_fourth + .av_one_fourth, .responsive #custom-section .av_one_fourth.first + .av_one_fourth + .av_one_fourth, .responsive #custom-section .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth, .responsive #custom-section .av_one_fourth.first + .av_one_fourth + .av_one_half {
margin-left: 0;
width: 100%;
}}

    Regards,
    Ismael

    February 16, 2015 at 1:37 am #396497
    adamgelston

    That has worked somewhat, It aligned the bottom button to the middle, but the top now is off centre. Here’s a screenshot. image 5

    February 16, 2015 at 3:15 pm #396737
    Yigit

    Hi!

    Please post the link to your website when you launch it or when you create a testing environment so we can provide you an accurate solution. Please see – http://kriesi.at/documentation/enfold/move-from-a-local-installation-to-a-live-server/

    Cheers!
    Yigit

    February 17, 2015 at 4:07 am #397219
    adamgelston
    This reply has been marked as private.
    February 17, 2015 at 6:16 pm #397685
    Elliott

    Hey!

    I would use the grid row element there instead of 4 1/4’s. That way the columns will not stack on top of each other on smaller screens.

    Or at least use 1/2 instead of 1/4. When you have four columns they still stack to 2 columns (which is why they are staggered) and then to 1 column as the screen size gets smaller.

    Cheers!
    Elliott

    • This reply was modified 9 years, 10 months ago by Elliott.
    February 17, 2015 at 9:20 pm #397802
    adamgelston
    This reply has been marked as private.
    February 18, 2015 at 3:46 am #397939
    adamgelston

    Got it to work by using a grid row and removing the alignment when in mobile… thanks for all your help

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Resizing woes’ is closed to new replies.