Copied to clipboard

Flag this post as spam?

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


  • malar 58 posts 147 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 43 posts 246 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 58 posts 147 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 58 posts 147 karma points
    Nov 09, 2017 @ 10:34
    malar
    0

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

  • malar 58 posts 147 karma points
    Nov 09, 2017 @ 13:15
    malar
    0

    Anyone please help me.

  • John Churchley 252 posts 1132 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 107 posts 361 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 58 posts 147 karma points
    Nov 13, 2017 @ 11:52
    malar
    0

    Hello Lewis Smith,

    Thank you so much, it works fine.

    Have a nice day.

Please Sign in or register to post replies

Write your reply to:

Draft