Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 13, 2018 at 7:21 pm #956102
    koraytastan

    Helloo guys !

    How can i do sub successive 1/3 columns (total 6 pieces) ?
    https://image.ibb.co/c9OQWJ/columns.png

    Best,

    May 14, 2018 at 3:04 am #956170
    Vinay

    Hey koraytastan,

    You can achieve this using masonry grid and use portfolio items or blog posts to display.

    If you like to do it with columns I’m afraid you might run into responsive issues depending on how complicated your final version will be,

    However to achieve a similar result as your mockup please use negative margins in the 2nd row of the columns.

    Columns

    Best regards,
    Vinay

    May 14, 2018 at 8:47 am #956298
    koraytastan

    Can i do with 1/3 column and css?

    May 14, 2018 at 5:13 pm #956538
    Vinay

    Hey!

    Yes, it’s possible to do with columns but you have to use custom CSS. have you got started?

    1. Add 6 1/3 columns inside a color section.
    2. Give each column a custom css class name.
    3. Use the CSS to target each colum with -ve top margin instead of margin in element options.

    The reason to use custom CSS is we can precisely control custom margins in mobile device.

    Cheers!
    Vinay

    May 15, 2018 at 1:30 pm #956986
    koraytastan

    Vinay thank you, it’s working but mobile view incompatible, how can i fix it ?

    Best,

    • This reply was modified 6 years, 6 months ago by koraytastan.
    May 16, 2018 at 7:16 am #957338
    Rikard

    Hi,

    What do you mean by it not being compatible on mobile? Please try to explain a bit further or post a screenshot highlighting the problem. Also post a link to where we can see the actual problem.

    Best regards,
    Rikard

    May 16, 2018 at 5:56 pm #957624
    koraytastan

    Hi,

    Only 1-4 between problem. Total 6 box, three above three bottom.
    1-2-3-4. (no css class)
    5. and 6. column (css class below)

    https://preview.ibb.co/i02efd/columns.jpg

    .my_column_class { margin-top: -110px  !important; }

@media only screen and (max-width: 959px) {
.my_column_class {  margin-top: 0px !important; }}
    May 19, 2018 at 6:17 am #958905
    Rikard

    Hi,

    Thanks for the screenshot, though I still don’t see the problem. Could you post a link to where we can actually see the elements?

    Best regards,
    Rikard

    May 22, 2018 at 2:06 am #960087
    koraytastan

    Hi Rikard,

    Mobile column ranges is equal but, 1-4, 2-5, 3-6 range not equal (desktop ).
    (Column contents differ from each other.) How to only fix desktop ?

    May 23, 2018 at 8:12 pm #961161
    Basilis

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

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