0% found this document useful (0 votes)
11 views3 pages

Responsive Footer Design CSS Guide

The document contains CSS styles for a mobile footer, including layout adjustments for various screen sizes and responsive design elements. It defines styles for social media icons, buttons, and columns, ensuring proper display and alignment across devices. Media queries are utilized to adapt the layout for different viewport widths and orientations.

Uploaded by

Rivail Silva
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views3 pages

Responsive Footer Design CSS Guide

The document contains CSS styles for a mobile footer, including layout adjustments for various screen sizes and responsive design elements. It defines styles for social media icons, buttons, and columns, ensuring proper display and alignment across devices. Media queries are utilized to adapt the layout for different viewport widths and orientations.

Uploaded by

Rivail Silva
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

mobile_icons li{display:block}.auto__chrome_footer .social_container .

mobile_icons
li .app_link{display:block;margin-
bottom:4px}.auto__chrome_footer .social_container .mobile_icons li .app_link
img{display:block}@media (max-width:450px){.auto__chrome_footer .social_container
.mobile_icons li .app_link img{transform:scale(.7)}}@media (max-width:700px)
{.responsive .auto__chrome_footer .social_container .mobile_icons{margin-
top:0}}.auto__chrome_footer .columns{position:relative;text-
align:left;display:flex}.auto__chrome_footer .columns .column{padding:4px;box-
sizing:border-box}@media (max-width:950px)
{.responsive .auto__chrome_footer .columns{flex-wrap:wrap;justify-content:flex-
start}}.auto__chrome_footer .joint_column{width:152px;display:inline-block;vertical-
align:top;text-
align:left}.auto__chrome_footer .joint_column .column{display:block;width:auto;margi
n-bottom:18px}.auto__chrome_footer .joint_column .column:last-child{margin-
bottom:0}.auto__chrome_footer .column{width:152px;display:inline-block;vertical-
align:top;text-align:left}.auto__chrome_footer .column:not(.social_container) a{font-
size:12px;color:#444}.auto__chrome_footer .column:not(.social_container)
a:hover{color:var(--spl-color-text-link-primary-
hover)}.auto__chrome_footer .column:not(.social_container) a:active{color:var(--spl-
color-text-link-primary-click)}.auto__chrome_footer .column:not(.social_container)
a .icon{font-size:12px}.auto__chrome_footer .column:last-child{margin-
right:0}.auto__chrome_footer .column .social_title{font-
size:14px;margin:0;color:#666;letter-spacing:.075em;text-transform:uppercase;font-
weight:700}.auto__chrome_footer .ad_choices{margin-
right:4px;position:relative;overflow:hidden;height:12px;width:13px;display:inline-
block;top:2px}.auto__chrome_footer .ad_choices .ad_choices_icon{position:absolute;t
op:-14px;left:-78px;max-width:none}@media (max-width:1024px)
{.auto__chrome_footer.doc_page_responsive .social_container .mobile_icons{margin-
top:0}.auto__chrome_footer.doc_page_responsive .columns{flex-wrap:wrap;justify-
content:flex-
start}.auto__chrome_footer.doc_page_responsive .columns .column{margin-
bottom:10px;width:50%}}@media (min-width:700px) and (max-width:1024px)
{.hybrid .auto__chrome_footer{padding-
left:180px}.auto__chrome_footer .inner{padding:32px
16px}.auto__chrome_footer .column.social_container{width:9em}}@media (max-
width:700px){.auto__chrome_footer .social_container .icon{margin:0 8px 0 0;font-
size:20px}}@media (max-width:550px)
{.auto__chrome_footer .social_container .icon{font-size:var(--text-size-title3)}}@media
(max-width:450px){.auto__chrome_footer .social_container .icon{margin:0 5px 0
0;font-size:var(--text-size-title5)}}@media screen and (max-width:450px) and (max-
height:700px){.auto__chrome_footer{position:static}}@media screen and (min-
width:1024px) and (min-height:950px){.auto__chrome_footer{position:fixed}}@media
(max-width:950px) and (orientation:landscape)
{.auto__chrome_footer{position:static}}@media (min-width:793px) and (max-
width:858px){.auto__chrome_footer{position:fixed}}.wrapper__store_button{margin-
bottom:15px}.no_footer .auto__chrome_footer{display:none}.auto__shared_react_bu
tton_menu{position:relative}.auto__shared_react_button_menu .button_menu{backgr
ound:#fff;border-radius:4px;border:1px solid #e9edf8;box-shadow:0 0 10px
rgba(0,0,0,.1);position:absolute;z-index:29;min-
width:220px}.auto__shared_react_button_menu .button_menu:before{background:#ff
f;border-radius:4px;bottom:0;content:"
";display:block;left:0;position:absolute;right:0;top:0;z-index:-1}@media (max-
width:450px){.auto__shared_react_button_menu .button_menu:not(.no_fullscreen)
{position:fixed;top:3.75em!important;left:0!important;right:0!important;bottom:0!
important;width:auto!
important}}.auto__shared_react_button_menu .button_menu .button_menu_arrow{b
order-width:6px;z-index:-
2}.auto__shared_react_button_menu .button_menu .button_menu_arrow:before{tran
sform:rotate(45deg);box-shadow:0 0 10px rgba(0,0,0,.1);content:"
";display:block;height:10px;position:relative;width:10px}.auto__shared_react_button_
menu .button_menu .button_menu_arrow,.auto__shared_react_button_menu .button
_menu .button_menu_arrow:after{border-color:transparent;border-
style:solid;display:block;height:0;position:absolute;width:0}.auto__shared_react_butto
n_menu .button_menu .button_menu_arrow:after{border-
width:5px;content:""}@media (max-width:450px)
{.auto__shared_react_button_menu .button_menu .button_menu_arrow{display:none
}}.auto__shared_react_button_menu .button_menu.top{bottom:calc(100% +
10px)}.auto__shared_react_button_menu .button_menu.top .button_menu_arrow{bo
ttom:-6px;border-bottom-width:0;border-top-
color:#e9edf8}.auto__shared_react_button_menu .button_menu.top .button_menu_a
rrow:before{top:-12.5px;left:-
5px}.auto__shared_react_button_menu .button_menu.top .button_menu_arrow:after{
content:" ";bottom:1px;margin-left:-5px;border-bottom-width:0;border-top-
color:#fff}.auto__shared_react_button_menu .button_menu.bottom{top:calc(100% +
10px)}.auto__shared_react_button_menu .button_menu.bottom .button_menu_arrow
{top:-6px;border-top-width:0;border-bottom-
color:#e9edf8}.auto__shared_react_button_menu .button_menu.bottom .button_men
u_arrow:before{top:2.5px;left:-
5px}.auto__shared_react_button_menu .button_menu.bottom .button_menu_arrow:a
fter{content:" ";top:1px;margin-left:-5px;border-top-width:0;border-bottom-
color:#fff}.auto__shared_react_button_menu .button_menu.left{right:-
15px}.auto__shared_react_button_menu .button_menu.left .button_menu_arrow{righ
t:15px;left:auto}.auto__shared_react_button_menu .button_menu.left.library_button_
menu{right:0}.auto__shared_react_button_menu

You might also like