fix post teaser width in mobile view

This commit is contained in:
ogerly 2023-02-09 16:00:05 +01:00
parent 77af12adc2
commit 55106dbe69
3 changed files with 18 additions and 31 deletions

View File

@ -105,21 +105,23 @@
<div v-else class="mobil-header-box"> <div v-else class="mobil-header-box">
<!-- logo, hamburger--> <!-- logo, hamburger-->
<ds-flex style="align-items: center"> <ds-flex style="align-items: center">
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px" >
<a <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
v-if="LOGOS.LOGO_HEADER_CLICK.externalLink" <a
:href="LOGOS.LOGO_HEADER_CLICK.externalLink.url" v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
:target="LOGOS.LOGO_HEADER_CLICK.externalLink.target" :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
> :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
<logo logoType="header" /> >
</a> <logo logoType="header" />
<nuxt-link </a>
v-else <nuxt-link
:to="LOGOS.LOGO_HEADER_CLICK.internalPath.to" v-else
v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo" :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
> v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
<logo logoType="header" /> >
</nuxt-link> <logo logoType="header" />
</nuxt-link>
</div>
</ds-flex-item> </ds-flex-item>
<!-- mobile hamburger menu --> <!-- mobile hamburger menu -->

View File

@ -29,7 +29,7 @@ export default {
<style lang="scss"> <style lang="scss">
/* dirty fix to override broken styleguide inline-styles */ /* dirty fix to override broken styleguide inline-styles */
.ds-grid { .ds-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
gap: 16px !important; gap: 16px !important;
grid-auto-rows: 20px; grid-auto-rows: 20px;
} }

View File

@ -297,21 +297,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.masonry-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 20px;
}
.grid-item {
grid-row-end: span 2;
&--full-width {
grid-column: 1 / -1;
}
}
.hide-filter { .hide-filter {
display: none; display: none;
} }