Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 13, 2021 at 5:09 pm #1316656
    profumopuntoit

    Hello,
    we have footer option to display four columns and it is working nicely in desktop and mobile view
    In tablet view instead, it is quite messy. I tried with all possible display options, but no one is satisfactory. Best results are with display: table-row;
    Is it possible to display the footer, in tablet view only, in two columns and two rows? If not, how to display image above and text below?
    A similar problem is with the sidebar using the recent post widget with Content | Sidebar Ratio 80%/20%
    Please see screenshots
    Thank you
    Mauro

    August 15, 2021 at 11:26 pm #1316831
    Mike

    Hey profumopuntoit,
    Thank you for your patience and for the link to your page, for tablet to have your footer two columns two rows please try this css:

    @media only screen and (min-width: 767px) and (max-width: 1024px) { 
	#footer .flex_column.av_one_fourth {
		  width: 44%;
	}
}

    Please see the screenshot in the Private Content area for the expected results.
    In this screenshot you will note that the first column with the news thumbnails has a 70px by 70px image but the frame around it is 143px by 72px this is due to your custom css:

    @media only screen and (min-width: 767px) and (max-width: 989px) {
span.news-thumb {
    width: 46% !important;
    height: 46% !important;
}
}

    please remove or adjust this css to correct.

    Best regards,
    Mike

    August 16, 2021 at 2:39 pm #1316964
    profumopuntoit

    Great thank you
    There is still an unwanted shift to the right in the third and fourth column due to
    div .av_one_fourth {
    margin-left: 6%;
    width: 20.5%;
    }
    If I set margin-left: to zero all the last three columns squeeze to the left
    Please look at the screenshot

    Thank you
    Mauro

    August 18, 2021 at 6:50 am #1317268
    Ismael

    Hi,

    Thank you for the update.

    We cannot seem to reproduce the issue on our end. The columns responds and resize correctly when we resize the viewport or browser screen. What is the size or width of the screen in the screenshot above?

    Have you tried creating more css media queries to adjust the width of the columns on smaller screens?

    Example:

    @media only screen and (max-width: 989px) {
   #footer .av_one_fourth {
      margin-left: 6%;
      width: 20.5%;
   }
}

    Best regards,
    Ismael

    August 23, 2021 at 2:43 pm #1317978
    profumopuntoit

    Thank you Ismael,

    I have opted for

    @media only screen and (max-width: 989px) {
    .flex_column.av_one_fourth.el_after_av_one_fourth.el_before_av_one_fourth {
    min-width: -webkit-fill-available;
    }
    }

    like this footer “columns” are displayed one below the other, like in mobile, and I am quite happy with the result

    Mauro

    August 23, 2021 at 4:08 pm #1317997
    Guenni007

    well if it is your homepage – i would flex the content and use the whole width of the viewport,
    and because you have one time the featured images on the right once on the left it is hard to say what text belongs to the image.
    So maybe you colorize the columns to have a better overview.

    #footer {
  padding: 25px 0 5px 0;
}

#footer .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  padding: 0  !important;
  max-width: 100% !important;
  left: 0!important
}

#footer .container:after{
  display: none
}

#footer .container .flex_column {
  flex: 0 1 22%;
  width: unset !important;
  margin: 0 0 20px 0;
  padding: 10px;
  background-color: #333
}

#footer .container .flex_column section {
  padding: 0 15px;
}

@media only screen and (max-width: 1149px) {
  #footer .container {
    justify-content: space-evenly;
    width: 100%;
  }
  #footer .container .flex_column {
    flex: 0 1 46%;
    width: unset !important;
    margin: 0 0 20px 0;
  }
}

@media only screen and (max-width: 767px) {
  #footer .container {
    justify-content: space-evenly;
    width: 100%;
  }
  #footer .container .flex_column {
    flex: 0 1 90%;
    width: unset !important;
    margin: 0 0 20px 0;
  }
}

    and on less wide screens: 2rows 2columns:

    on small screens: 1 column only

    August 23, 2021 at 4:24 pm #1318002
    Guenni007

    btw: on your english site there must be something wrong with the setup.
    Everything on main looks different to your native language. Did you synchronize your css with the native language allready?

    PPS: if you like to preserve the container-width of the normal content change the max-width in that one rule above to:

    #footer .container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  padding: 0  !important;
  max-width: 1340px !important;  /*** this is different to the rule above ***/
  left: 0!important
}
    August 25, 2021 at 4:37 pm #1318320
    profumopuntoit

    Thank you very much Guenni007,
    it is very neat looking now
    The two website do not have exactly the same css, but more or less I have synchronized them now

    August 25, 2021 at 9:14 pm #1318339
    Guenni007

    Ok – thanks for the response

    August 26, 2021 at 6:16 am #1318378
    Ismael

    Hi,

    Alright! Thank you all for the update. We will close this thread for now.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Footer in tablet view in two colums and two rows’ is closed to new replies.