![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
February 24, 2023 at 11:13 am #1399128
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.
-
This topic was modified 1 year, 6 months ago by
Christopher.
February 24, 2023 at 2:24 pm #1399156the 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 #1399158what 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 #1399160First 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 #1399162because 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 #1399165these 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 #1399201ich 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 #1399222Aha – 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 #1399242February 25, 2023 at 1:09 pm #1399251And 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 #1399309It 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. THANKSFebruary 26, 2023 at 4:11 pm #1399316Hi,
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 -
This topic was modified 1 year, 6 months ago by
-
AuthorPosts
- The topic ‘Align widget in footer at the bottom’ is closed to new replies.