Probleme responsive design

[dubot85]

Hello,

i have a display problem on my website with the element “retour boutique”
haye you got a css code to suggest me to display correctly on mobile?
My url https://www.fleurdelin-caen.fr/product-category/tapis/tapis-et-kilims-afghans/
thanks

[PaulOB]

@dubot85

i have a display problem on my website with the element “retour boutique”

Hi, I couldn’t see an element called ‘retour boutique’ but I did see the two words called ‘retour boutique’ so I’m assuming that’s what you meant as they are taking a whole column on mobile.

It’s quite complicated as you have lot going on in there but you basically need to remove the flex from the parent and stack the columns vertically.

Try this although i may need tweaking.

@media screen and (max-width: 767.9px) {
  #Content {
    display: block;
  }
  #Content .sidebar.four.columns {
    float: none;
    width: auto;
  }
  #Content .sidebar.four.columns > .widget-area {
    min-height: 0 !important;
  }

  .with_aside #Content .sections_group {
    float: none;
    width: auto;
  }
  .with_aside #Content .content_wrapper {
    margin: auto;
  }

  #Content .column.one {
    float: none;
  }
}

It should then look like this live screenshot:

That code will need to go at the end of your css files so that it is not over-ridden by something else.

I also notice that your# Subheader is taking up a lot of space but there seems to be nothing there so I would suggest reducing the padding on subheader or hiding it if you are not displaying anything there.

[dubot85]

ok, you are good,
good job
I couldn’t find an answer on any forum
thanks for your advice
ok , if add a new code, this code must be the last.

[PaulOB]

@dubot85

ok , if add a new code, this code must be the last.

Yes the code needs to follow any other rules just in case you over-ride it in error.