Let's Reconnect, thank you for making 2022 our best year yet.

Infolets in Responsive UX — Cloud Customer Connect

.fullPageLoader { display: none } body.isLoading .page { max-height: initial; height: initial; }

.logo { width: 120px; height: 28px; opacity: 0.6; } .header-container { height: 50px; background: #302D2A; } .logo-container { position: absolute; display: flex; color: #fff; left: 130px; top: 10px; } .logo-container p { margin: auto; padding-left: 20px; } .titleBar-button_fmuucnv.titleBar-button_fmuucnv, .titleBar-button_fmuucnv.titleBar-button_fmuucnv:hover:not(:disabled), .titleBar-button_fmuucnv.titleBar-button_fmuucnv:focus, .titleBar-button_fmuucnv.titleBar-button_fmuucnv:focus:not(.focus-visible), .titleBar-button_fmuucnv.titleBar-button_fmuucnv:active:not(:disabled), .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen, .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen:focus, .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen.focus-visible { color: #fff !important; } .footbar-container { height: 80px; } .footbar-subcontainer { position: relative; height: 80px; background: #CEAA8F; display: flex; align-items: center; justify-content: center; } .footbar-subcontainer p { color: #302D2A; font-size: 20px; margin-right: 10px; } body { font-family: Oracle Sans; } .About.P { background-size: cover; background-image: url(https://us.v-cdn.net/6032253/uploads/815/QURW3A01AKVP.png) } body.Section-Profile .ProfileOptions .ButtonGroup a { background: #302D2A; border-radius: 50px; color: #fff; } body.Section-Profile .Profile dd, body.Section-Profile .Profile dt { color: #100F0E; } .BreadcrumbsBox .Breadcrumbs a { color: #302D2A; font-family: Oracle Sans; } .BreadcrumbsBox { max-width: 1264px; padding-left: 40px; padding-right: 40px; margin: 0 auto; } .ReactionsWrap.H { color: #100F0E; font-weight: 800; } body.Section-Profile .CountItemWrap { width: 95px; margin: 14px; } body.Section-Profile .CountItemWrap .CountTotal { color: #A1ADAF; font-family: Oracle Sans; font-style: normal; font-weight: normal; font-size: 48px; } body.Section-Profile .CountItemWrap .CountLabel { font-family: Oracle Sans; font-style: normal; font-weight: normal; font-size: 16px; } .BoxFilter ul.FilterMenu li.Active a{ background: #302D2A; color: #fff; padding: 5px; } .BoxFilter ul.FilterMenu li a{ font-family: Oracle Sans; font-style: normal; font-weight: 600; font-size: 17px; color: #41727E; } @media screen and (max-width: 768px) { .logo { margin: 0 auto; } } @media screen and (max-width: 480px) { .footbar-container { height: auto; } .footbar-subcontainer { display: block; height: auto; } .footbar-subcontainer p { font-weight: bold; font-size: 26px; line-height: 34px; color: #fff; padding: 20px; } }

Infolets in Responsive UX

Received Response

38

Views

2

Comments

Dec 5, 2019 2:39PM edited Dec 5, 2019 2:39PM in HCM Mobile 2 comments

Summary

In the Classic UI the Infolets aren't responsive and look horrible on mobile. What will the experience by link in Responsive UX?

Content

Hello,

In ResponsiveUX will the Infolets be mobile responsive?

Thanks,

Rebecca

Tagged:

Manager Self Service

0

Howdy, Stranger!

To view full details, sign in.

Don't have an account? Click here to get started!

.logo { width: 120px; height: 28px; opacity: 0.6; } .header-container { height: 50px; background: #302D2A; } .logo-container { position: absolute; display: flex; color: #fff; left: 130px; top: 10px; } .logo-container p { margin: auto; padding-left: 20px; } .titleBar-button_fmuucnv.titleBar-button_fmuucnv, .titleBar-button_fmuucnv.titleBar-button_fmuucnv:hover:not(:disabled), .titleBar-button_fmuucnv.titleBar-button_fmuucnv:focus, .titleBar-button_fmuucnv.titleBar-button_fmuucnv:focus:not(.focus-visible), .titleBar-button_fmuucnv.titleBar-button_fmuucnv:active:not(:disabled), .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen, .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen:focus, .titleBar-button_fmuucnv.titleBar-button_fmuucnv.isOpen.focus-visible { color: #fff !important; } .footbar-container { height: 80px; } .footbar-subcontainer { position: relative; height: 80px; background: #CEAA8F; display: flex; align-items: center; justify-content: center; } .footbar-subcontainer p { color: #302D2A; font-size: 20px; margin-right: 10px; } body { font-family: Oracle Sans; } .About.P { background-size: cover; background-image: url(https://us.v-cdn.net/6032253/uploads/815/QURW3A01AKVP.png) } body.Section-Profile .ProfileOptions .ButtonGroup a { background: #302D2A; border-radius: 50px; color: #fff; } body.Section-Profile .Profile dd, body.Section-Profile .Profile dt { color: #100F0E; } .BreadcrumbsBox .Breadcrumbs a { color: #302D2A; font-family: Oracle Sans; } .BreadcrumbsBox { max-width: 1264px; padding-left: 40px; padding-right: 40px; margin: 0 auto; } .ReactionsWrap.H { color: #100F0E; font-weight: 800; } body.Section-Profile .CountItemWrap { width: 95px; margin: 14px; } body.Section-Profile .CountItemWrap .CountTotal { color: #A1ADAF; font-family: Oracle Sans; font-style: normal; font-weight: normal; font-size: 48px; } body.Section-Profile .CountItemWrap .CountLabel { font-family: Oracle Sans; font-style: normal; font-weight: normal; font-size: 16px; } .BoxFilter ul.FilterMenu li.Active a{ background: #302D2A; color: #fff; padding: 5px; } .BoxFilter ul.FilterMenu li a{ font-family: Oracle Sans; font-style: normal; font-weight: 600; font-size: 17px; color: #41727E; } @media screen and (max-width: 768px) { .logo { margin: 0 auto; } } @media screen and (max-width: 480px) { .footbar-container { height: auto; } .footbar-subcontainer { display: block; height: auto; } .footbar-subcontainer p { font-weight: bold; font-size: 26px; line-height: 34px; color: #fff; padding: 20px; } }