Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 24, 2023 at 11:13 am #1399128
    Christopher

    Hi, I have my widgets in the footer all aligned at the bottom. I use this code for that:

    #footer .container {
    display: flex;
    align-items: flex-end;
}

#footer .container {
    margin-bottom: 0 !important;
}

    It works, however the widgets are now displayed side by side in the mobile view instead of one below the other as they used to be.

    Startseite

    • This topic was modified 1 year, 6 months ago by Christopher.
    February 24, 2023 at 2:24 pm #1399156
    Guenni007

    the idea is good but add to your rule above:

    #footer .container {
  display: flex;
  align-items: flex-end;
  flex-flow: row wrap;
  justify-content: space-between;
}


    BUT     you have to proove your settings – because content on the right side is cropped on smaller screens like ipad :

    February 24, 2023 at 2:32 pm #1399158
    Guenni007

    what makes me wonder is that the fallback width is working 

    .responsive .container {
  max-width: 1130px;
}

    and that the .container width is set to 100% on pages with sidebar even on non responsive case …

    this is commonly a sign that a rule inside your css is wrong set : missing closing brackets or comma instead of semicolon – or vice versa on selectors using semicolon to separte them.

    February 24, 2023 at 2:40 pm #1399160
    Christopher

    First of all thanks for the first code, it worked.
    With the truncated container on the right side I am at a loss. So here is the whole code. Can you find an error here?

    .content { padding-bottom: 20px; }
.content { padding-top: 30px; }

#socket .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

#socket .sub_menu_socket div {
    overflow: visible;
}
#socket .menu {
    margin-top: -8px;
}
#top .inner_sidebar {
    margin-left: 20px !important;

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

.main_menu .menu ul { width: 130px; }

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block !important;
}}

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important;
  }

  .responsive #top #main {
    padding-top: 81px !important;
  }}

@media only screen and (max-width: 767px) {
    #top #wrap_all #footer .flex_column, #top #wrap_all  #footer .widget {
        margin: 7px;
    }
}

#footer .container {
  display: flex;
  align-items: flex-end;
  flex-flow: row wrap;
  justify-content: space-between;
}

.responsive .container {
  max-width: 1130px;
}
    February 24, 2023 at 2:47 pm #1399162
    Guenni007

    because you haven’t merged the files i checked it allready. There is no error on that.
    Did you paste in elsewhere some css code ? Or does a plugin inject a wrong code –

    February 24, 2023 at 3:03 pm #1399165
    Guenni007

    these rules here are added after the quick css entries :

    remove please the last rule in your quick css:

    .responsive .container {
  max-width: 1130px;
}

    this is better done on Enfold – General Layout – Dimensions done:

    but on some reasons the grid.css rule and layout.css rules for container width do not take effect.
    There must be an error on a rule concerning to @media only screen and (min-width: 768px) and (max-width: 989px) {
    Guess a mod hat o login to your page to see where it comes from.

    February 25, 2023 at 2:13 am #1399201
    Guenni007

    ich kann es nicht finden. Eventuell solltest du mal schauen, erstmal alle plugin zu deaktivieren – in Enfold dann die Cache/Merging geschichten zu resetten.
    Dann schauen ob sich das Problem zwischen 768 und 989 px löst. ( denn selbst der Hamburger ist in der Spanne nicht zu sehen)
    Falls ja – dann mal ein Plugin nach dem Anderen wieder reaktivieren und schauen ob es an einem der Plugins liegt.

    February 25, 2023 at 10:02 am #1399222
    Guenni007

    Aha – the method to switch of the css one by one in developer tools. It must be the events-caledar-for-google-public.css

    it is this very globaly set rule :

    *, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

    this is actually an impertinence from whoever is including this css. It has nothing at all specific for eventscalendar in this rule.
    It knocks out ( even if not with !important ) for ALL elements a rule that has influence everywhere. Please write to the plugin manufacturer. And remove this rule from that css.
    _________________
    das ist eigentlich eine Frechheit von demjenigen der diese css mit einschleust. Es hat überhaupt nichts spezifisches für eventscalendar in dieser Regel.
    Es haut ( wenn auch nicht mit !important ) für ALLE Elemente eine Regel raus, die überall Einfluss hat. Bitte mal den Pluginhersteller anschreiben. Bitte lösche also diese Regel.

    February 25, 2023 at 12:15 pm #1399242
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    February 25, 2023 at 1:09 pm #1399251
    Guenni007

    And btw. from GDPR ( DSGVO ) reasons it is better to remove all font loading from third party plugins.
    Maybe there is an option too on the plugin to hamper this. ( as on the embedded Layerslider Plugin )

    PPS : es hätte gereicht nur diese unsägliche Regel aus dieser css zu löschen !

    February 26, 2023 at 1:34 pm #1399309
    Christopher

    It works. The Google Calendar plugin was to blame. Now it’s deleted and everything is back as it should be. THANKS! Topic can be closed.
    I am always amazed at the quick help here. Mega cool. THANKS

    February 26, 2023 at 4:11 pm #1399316
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Align widget in footer at the bottom’ is closed to new replies.