Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • malar 97 posts 206 karma points
    Nov 09, 2017 @ 08:36
    malar
    0

    Hello Team,

    Please help me anyone.

    This is my website: http://deo.dk/

    In the front page , it is displaying some alignment problem. I tried many times but I can not find it. I attached sample picture. Please you can see in the front page bottom. I want to display three and three rows.

    Please help me, it is very urgent.enter image description here

  • Mario 49 posts 305 karma points c-trib
    Nov 09, 2017 @ 09:31
    Mario
    0

    You have to reset your columns every three items because they have different height:

    Bootstrap reset

    You have to use the clearfix class. You can also use it with the normal Boostrap breakpoints like 'visible-md-block' so it's not applied to smaller screen for instance.

  • malar 97 posts 206 karma points
    Nov 09, 2017 @ 10:16
    malar
    0

    Hello Mario,

    I tried , It is not coming. Can you please help me. Because i also tensed.

  • malar 97 posts 206 karma points
    Nov 09, 2017 @ 10:34
    malar
    0

    First time i am using this css , therefore little bit confused.

  • malar 97 posts 206 karma points
    Nov 09, 2017 @ 13:15
    malar
    0

    Anyone please help me.

  • John Churchley 262 posts 1178 karma points c-trib
    Nov 09, 2017 @ 13:44
    John Churchley
    0

    use a count in the foreach loop of your post then an if statement which adds a clear fix after each 3 posts like this:

    @{
    int count = 0;
    }
    
    @foreach(var post in posts){
    /*Your posts logic*/
    
    @if(count%3 ==0){
    <div class="clearfix"></div>
    }
    
    count++;
    }
    

    % means remainder

  • Lewis Smith 174 posts 515 karma points c-trib
    Nov 13, 2017 @ 11:31
    Lewis Smith
    0

    Hi,

    This is because your first item is taller than the second and first, you could use flexbox (css) display the parent as flex and set the flex-wrap: to wrap. Flex will equal the height of all of its children meaning you shouldn't encounter this issue. If you are supporting older browsers such as IE9 then flexbox is not supported.

        .newsRow{
             display: flex;
             flex-wrap: wrap;
        }
    

    This is working when i edit your website in chrome tools. See below.

    enter image description here

  • malar 97 posts 206 karma points
    Nov 13, 2017 @ 11:52
    malar
    0

    Hello Lewis Smith,

    Thank you so much, it works fine.

    Have a nice day.

  • malar 97 posts 206 karma points
    Apr 24, 2018 @ 08:12
    malar
    0

    Hi ,

    Lewis told that i need to use flex . That is fine. it is working all browser but not in safari . flex, flex-wrap is not working in safari. Can you please help me

    .newsRow{ display: flex; flex-wrap: wrap; }

Please Sign in or register to post replies

Write your reply to:

Draft