0

I can't make horizontal some div in a div. And if i can, i can't edit the size ! This is a little part of code

HTML / PHP

echo '<div class="makeitseo">';
foreach ( $res as $service ) {               
    $serv = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $service->keyword) ) ) . "-k" . $service->id ;    
    echo 
    '<div class="cell"><a href="' . $serv .'"><img src="' . $service->image . '">'
    .'<br>' . $service->keyword .
    '<br>' . $service->texte .
    '</a></div>';
}

echo '</div>';

CSS

.makeitseo{
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
.cell {

  margin: 10px, 10px, 10px, 10px;
  height: 400px;
  width: 400px;
  padding: 2px;
  display: flex;
  align-items: center;
  overflow: auto;
}

Result:

enter image description here

Improve this question
15
  • Do you need the div to align horizontally instead of vertically? Or do you want it to be displayed in a separate row but in that div?
    – Behemoth
    Aug 20, 2020 at 13:24
  • I want display all the div in the .makeitseo horizontally like in the photo, but i can t change the horizontally size !
    – diegod1os
    Aug 20, 2020 at 13:25
  • You want all the 6 items inside div will be aligned and looks same as the first one and also you want to change the size. Right?
    – Behemoth
    Aug 20, 2020 at 13:36
  • i want all the div in the same line and when the size is passed, go back in the next line. But i want a width of the div inside the container bigger than in photo.
    – diegod1os
    Aug 20, 2020 at 13:38
  • ivst.xooweb.com/test.html Check this. I have created using your script and let me know is this what you wanted.
    – Behemoth
    Aug 20, 2020 at 13:57

1 Answer 1

Reset to default
0 
    <style>
        .makeitseo{
  width: 100%;
  margin: 10px auto;
  text-align: center;
  display: flex;
  justify-content: center;
}
img {
    width: 100%;
}
.cell {
    margin: 10px 10px 10px 10px;
    height: 400px;
    width: 400px;
    padding: 2px;
    display: flex;
    align-items: center;
    overflow: auto;
    flex-direction: column;
}
    </style>

use this styles for your html and change the parent container with so that the overall containers will be resized.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.