I have a footer container with menu items and paddles for scrolling. The layout includes a description text and a log link.
When the screen size is over 768px, all three elements (menu, description text, log link) are displayed in the same line. However, if the screen size is less than 768px, the design should look like this:
< Menu >
Description text Log linkCheck out the screenshot for screens less than 768px: https://i.sstatic.net/33QZI.png
The issue arises when the description text and log link are not on the same line due to the width of the log section, causing the menu inner wrapper to be hidden behind the screen. How can this be resolved?
Below is my CSS style for screens less than 768px:
@media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}