Copied to clipboard

Flag this post as spam?

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


  • malar 50 posts 119 karma points
    14 days ago
    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 231 karma points
    1 week ago
    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 50 posts 119 karma points
    1 week ago
    malar
    0

    Hello Mario,

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

  • malar 50 posts 119 karma points
    1 week ago
    malar
    0

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

  • malar 50 posts 119 karma points
    1 week ago
    malar
    0

    Anyone please help me.

  • John Churchley 248 posts 1125 karma points c-trib
    1 week ago
    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 84 posts 307 karma points c-trib
    1 week ago
    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 50 posts 119 karma points
    1 week ago
    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