diff --git a/blocks/applyloanform/applyloantemplate.js b/blocks/applyloanform/applyloantemplate.js index 0cacf8e193..60a0de7c82 100644 --- a/blocks/applyloanform/applyloantemplate.js +++ b/blocks/applyloanform/applyloantemplate.js @@ -125,7 +125,7 @@ export function appplyLoanTemplate() { arrowimage + data-src="https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/down-arrow.png" alt="arrowimage">
@@ -183,11 +183,11 @@ export function appplyLoanTemplate() { ${properties.firstCheckText} salaried-after-selected-icon salaried-before-selected-icon
@@ -203,10 +203,10 @@ export function appplyLoanTemplate() { id="radio-business" name="emplyoment" type="radio"> ${properties.secondCheckText} business-loan-after-selected-icon business-loan-before-selcted-icon @@ -230,7 +230,7 @@ export function appplyLoanTemplate() { dobarrow + data-src="https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/calendar.png" alt="dobarrow"> @@ -246,7 +246,7 @@ export function appplyLoanTemplate() { arrowimage + data-src="https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/down-arrow.png" alt="arrowimage"> Enter Valid State @@ -262,7 +262,7 @@ export function appplyLoanTemplate() { arrowimage + data-src="https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/down-arrow.png" alt="arrowimage"> Enter Valid branch @@ -292,7 +292,7 @@ export function appplyLoanTemplate() {
- arrow + arrow

${properties.verifyHead}

Enter the 4 digit OTP sent to 7845789658

@@ -358,7 +358,7 @@ export function appplyLoanTemplate() {

${properties.errorhead}

${properties.errorSubhead}

- error-warning + error-warning

${properties.RedBoxText}

diff --git a/blocks/applyloanform/statemasterapi.js b/blocks/applyloanform/statemasterapi.js index 038c615a2a..b01ea38aa0 100644 --- a/blocks/applyloanform/statemasterapi.js +++ b/blocks/applyloanform/statemasterapi.js @@ -39,8 +39,9 @@ function statemasterGetStatesApi() { // let stateMasterGraphQLQuery = "query MyQuery { statemasterList { items { state, data } } }"; fetchAPI("GET", url) - .then(function (response) { - workFlowStatemaster(response.responseJson.data.statemasterList.items); + .then(async function (response) { + const responseJson = await response.json(); + workFlowStatemaster(responseJson.data.statemasterList.items); }) .catch(function (error) { console.warn(error); diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 84fdd36e1c..9db53fc085 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -306,9 +306,9 @@ } } -@media screen and (max-width:768px) { +@media screen and (max-width:767.99px) { .section.banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser { - height: 100%; + height: 440px; } .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background { @@ -434,80 +434,69 @@ .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-one>.background .foreground .text .long-description>p{ margin-top: 20px; } + .banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser.teaser-block-two .foreground { + width: 100%; + } } -@media screen and (min-width:768px) and (max-width:1024px) { +@media (min-width: 768px) and (max-width: 1024px) { .section.banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser { height: 440px; } .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background { - padding: 0 16px; - padding-top: 40px; - align-items: start; - background-size: cover; - } - - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .front-picture img { - max-height: 170px; - max-width: 200px; + padding: 0; + background-size: 100% 100%; } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .front-picture { - right: 16px; + .banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser .foreground, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground { + width: 100%; + min-height: 450px; + padding: 0 16px; } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .title>h2, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .eyebrow, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five .background .foreground .text .title>h3, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five .background .foreground .text .eyebrow, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six .background .foreground .text .title>h3, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six .background .foreground .text .eyebrow, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven .background .foreground .text .title>h3, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .title>h2, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .eyebrow, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five .background .foreground .text .title>h3, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five .background .foreground .text .eyebrow, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six .background .foreground .text .title>h3, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six .background .foreground .text .eyebrow, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven .background .foreground .text .title>h3, .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven .background .foreground .text .eyebrow { - font-size: 24px; + font-size: 1.5rem; line-height: 32px; } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .short-description>p, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .long-description>p>em, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .long-description>p>strong, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six>.background .foreground .text .long-description>p, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-one>.background .foreground .text .long-description>p, - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven>.background .foreground .text .long-description>p { - font-size: 14px; - line-height: 20px; + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .long-description>p, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .long-description>p>em, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-five>.background .foreground .text .long-description>p>strong, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six>.background .foreground .text .long-description>p, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-one>.background .foreground .text .long-description>p, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven>.background .foreground .text .long-description>p, + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.--skyblue>.background .foreground .text .long-description>p { + font-size: .875rem; + line-height: 1rem; } .banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser .foreground .long-description { margin-top: 12px; } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .cta { - margin-top: 24px; - } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .cta>a, .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six>.background .foreground .text .short-description>ul>li>p>a { - font-size: 14px; - line-height: 20px; + font-size: .875rem; + line-height: 1.25rem; padding: 14px 16px; - margin: unset; - } - - .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container { - left: 16px; - bottom: 70px; - gap: 8px; + margin: 0; } - .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button { - height: 5px; - width: 5px; + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text .cta { + margin-top: 24px; } - .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button.selected { - width: 13px; + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six>.background .foreground .text .long-description { + margin-right: 0; } .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-six>.background .foreground .text .short-description>ul>li { @@ -527,12 +516,44 @@ line-height: 1.25rem; } + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .foreground .text { + padding-top: 40px; + } + + .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container { + left: 12px; + bottom: 40px; + gap: 8px; + } + + .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button { + height: 5px; + width: 5px; + } + + .section.banner-carousel-wrapper .carousel-wrapper .carousel.block .button-container>button.selected { + width: 13px; + } + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-two>.background .foreground .text .eyebrow { - font-size: 14px; - line-height: 20px; + font-size: .875rem; + line-height: 1rem; margin-bottom: 12px; } + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .front-picture img { + max-height: 170px; + max-width: 200px; + } + + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block>.background .front-picture { + right: 16px; + } + + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-two>.background .front-picture { + bottom: 0; + } + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven>.background .foreground .cta-image-wrapper { gap: 12px; } @@ -540,13 +561,14 @@ .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-seven>.background .foreground .cta-image-wrapper>.cta-image>a img { height: 30px; width: 100px; - border-radius: 5px; + border-radius: 2px; } + .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-one>.background .foreground .text .long-description>p{ margin-top: 20px; } - .section.banner-carousel-wrapper .carousel-wrapper .panel-container .teaser.block.teaser-block-two>.background .front-picture { - bottom: 0; + .banner-carousel-wrapper .carousel-wrapper .carousel .panel-container .teaser.teaser-block-two .foreground { + width: 50%; } } diff --git a/blocks/eligibilitycalculator/eligibilitycalculator.js b/blocks/eligibilitycalculator/eligibilitycalculator.js index f07997f550..1e72301cfc 100644 --- a/blocks/eligibilitycalculator/eligibilitycalculator.js +++ b/blocks/eligibilitycalculator/eligibilitycalculator.js @@ -26,7 +26,7 @@ export default async function decorate(block) { salariedtabname: "businessStatus", salariedtabvalue: "65", salariedtabtext: "I'm Salaried", - calculatorsalariedimg: "/content/dam/piramalfinance/product-page/home-loan/calculator-salaried.svg", + calculatorsalariedimg: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/calculator-salaried.svg", calculatorsalariedimgalt: "salaried", }, business: { @@ -35,7 +35,7 @@ export default async function decorate(block) { businesstabname: "businessStatus", businesstabvalue: "80", businesstabtext: "I'm doing Business", - calculatorbusinessimg: "/content/dam/piramalfinance/product-page/home-loan/calculator-business.svg", + calculatorbusinessimg: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/calculator-business.svg", calculatorbusinessimgalt: "business", }, selectloantype: { @@ -162,13 +162,13 @@ export default async function decorate(block) { }, ], }, - calendarbox: "/content/dam/piramalfinance/homepage/images/calc-calendarwebp", - calendarmobile: "/content/dam/piramalfinance/homepage/images/calc-calendarwebp", + calendarbox: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/homepage/images/calc-calendarwebp", + calendarmobile: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/homepage/images/calc-calendarwebp", outputtext: "Your home loan EMI is", button1text: "Talk to loan expert", - button1link: "https://www.google.com/", + button1link: "", button2text: "Apply loan now", - button2link: "https://www.google.com/", + button2link: "", pageproperties: "bl", }, ], diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 5d62896701..afb53ff3da 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -277,13 +277,21 @@ color: #F58667; .footer-section-first .columns > div { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: start; align-items: center; } + .footer-section-first .columns > div div:first-child { + width: 50%; + } + .footer-section-first .columns > div div:nth-child(2) { + width: 50%; + } .footer-section-first .columns > div > div p { font-size: 12px; width: 100%; - margin-left: auto; + padding: 0 0 0 60px; + text-align: left; + margin: 0; } .footer-section-second ul > li > p { font-size: 0.875rem; @@ -346,9 +354,6 @@ color: #F58667; .footer-section-third .columns-2-cols > div > div p { margin: 10px 0 0; } */ - .footer-section-first .columns > div > div:last-child { - margin-right: 20%; - } .footer-section-second .columns-2-cols ul li p:first-child{ padding-bottom: unset; } @@ -401,9 +406,6 @@ color: #F58667; .footer-section-first{ padding: 24px 0; } - .footer-section-first .columns > div > div:last-child{ - margin-right: 10%; - } .footer-section-first .columns-wrapper p sup{ background-color: #41C672; color: #fff; @@ -421,6 +423,7 @@ color: #F58667; text-align: center; justify-content: center; right: 77px; + left: 0; } header nav .nav-brand img { width: 82px; @@ -429,6 +432,21 @@ color: #F58667; .header-wrapper .nav-wrapper nav .nav-brand .default-content-wrapper>p>picture>img { padding: 0; } + .footer-section-four.columns-container .default-content-wrapper p :last-child{ + display: none; + } + .footer-section-second ul > li > ul{ + display: flex; + flex-direction: column; + gap: 8px; + } + .footer-section-four .columns-wrapper .columns .columns-img-col picture img{ + height: 25px; + width: 25px; + } + .footer-section-first .columns-wrapper p sup{ + left: 0; + } } @media screen and (max-width: 1400px) { @@ -442,19 +460,19 @@ color: #F58667; max-width: 100% ; padding: 0 16px; } - .footer-section-four.columns-container .default-content-wrapper p :last-child{ - display: none; - } - .footer-section-second ul > li > ul{ +} + +@media (min-width:768px) and (max-width:1024px) { + .footer-section-first .columns > div { display: flex; - flex-direction: column; - gap: 8px; + flex-direction: row; + justify-content: start; + align-items: center; } - .footer-section-four .columns-wrapper .columns .columns-img-col picture img{ - height: 25px; - width: 25px; + .footer-section-first .columns > div div:first-child { + width: 50%; } - .footer-section-first .columns-wrapper p sup{ - right: 27%; + .footer-section-first .columns > div div:nth-child(2) { + width: 50%; } } \ No newline at end of file diff --git a/blocks/header/header.css b/blocks/header/header.css index b7872ee2e8..beb0010eb0 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -835,6 +835,28 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { } } +@media (min-width: 768px) and (max-width: 1024px) { + .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul { + display: none; + } + .header-wrapper .nav-wrapper .nav-hamburger { + position: absolute; + height: 12px; + width: 18px; + right: 1rem; + display: block; + visibility: visible; + top: 37%; + } + .login-button-wrapper .default-content-wrapper { + left: -35px; + top: 2px; + } + .header-wrapper .nav-wrapper { + height: 71px; + } +} + @media screen and (max-width:1366px) { .header-wrapper .nav-wrapper nav .nav-sections .default-content-wrapper>ul>li>ul { padding: 0 8% 0 13% @@ -846,7 +868,6 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul::before { @media screen and (max-width: 1024px) { .section.mobile-view-header { - /* display: block; */ display: none; position: absolute; top: 100%; diff --git a/blocks/homeloancalculator/homeloancalculator.js b/blocks/homeloancalculator/homeloancalculator.js index a7b16b5ba2..a96bbc4431 100644 --- a/blocks/homeloancalculator/homeloancalculator.js +++ b/blocks/homeloancalculator/homeloancalculator.js @@ -25,7 +25,7 @@ export default async function decorate(block) { salariedtabname: "employementStatus", salariedtabvalue: "80", salariedtabtext: "I'm Salaried", - calculatorsalariedimg: "/content/dam/piramalfinance/product-page/home-loan/calculator-salaried.svg", + calculatorsalariedimg: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/calculator-salaried.svg", calculatorsalariedimgalt: "salaried", }, business: { @@ -34,7 +34,7 @@ export default async function decorate(block) { businesstabname: "employementStatus", businesstabvalue: "60", businesstabtext: "I'm doing Business", - calculatorbusinessimg: "/content/dam/piramalfinance/product-page/home-loan/calculator-business.svg", + calculatorbusinessimg: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/product-page/home-loan/calculator-business.svg", calculatorbusinessimgalt: "business", }, selectloantype: { @@ -135,15 +135,15 @@ export default async function decorate(block) { }, ], }, - calendarbox: "/content/dam/piramalfinance/homepage/images/calc-calendarwebp", - calendarmobile: "/content/dam/piramalfinance/homepage/images/calc-calendarwebp", + calendarbox: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/homepage/images/calc-calendarwebp", + calendarmobile: "https://publish-p133703-e1305981.adobeaemcloud.com/content/dam/piramalfinance/homepage/images/calc-calendarwebp", outputtext: "Your home loan EMI is", principaltext: "Principal amount", interesttext: "Interest amount", button1text: "Talk to loan expert", - button1link: "https://www.google.com/", + button1link: "", button2text: "Apply loan now", - button2link: "https://www.google.com/", + button2link: "", pageproperties: "hl", }, ], diff --git a/styles/calculator/calculator.css b/styles/calculator/calculator.css index 376d766ecb..d149e0d532 100644 --- a/styles/calculator/calculator.css +++ b/styles/calculator/calculator.css @@ -104,7 +104,7 @@ } } -@media screen and (max-width:768px) { +@media screen and (max-width:767px) { .section.calculator-section-wrapper .default-content-wrapper h2 { font-size: 20px; line-height: 28px; diff --git a/styles/choose-us/choose-us.css b/styles/choose-us/choose-us.css index 61658fc789..d30cda2088 100644 --- a/styles/choose-us/choose-us.css +++ b/styles/choose-us/choose-us.css @@ -23,13 +23,16 @@ margin: 0; } -.choose-us-css>.columns-wrapper>.columns.block { +.section.choose-us-css>.columns-wrapper>.columns.block { margin-top: 20px; } -.choose-us-css .columns-wrapper .columns>div { - align-items: flex-start; - column-gap: 80px; +.section.choose-us-css .columns-wrapper .columns>div { + column-gap: 5pc; + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; + row-gap: 40px; } .section.choose-us-css .columns-wrapper .columns>div:nth-child(2) { @@ -88,7 +91,7 @@ /* home loan finance end */ -@media screen and (max-width: 1024px) { +@media screen and (max-width: 767px) { .section.choose-us-css .default-content-wrapper h2 { font-size: 20px; line-height: 28px; @@ -108,6 +111,7 @@ .section.choose-us-css .columns-wrapper .columns>div { row-gap: 24px; + grid-template-columns: 1fr; } .section.choose-us-css .columns-wrapper .columns>div:nth-child(2) { @@ -145,11 +149,11 @@ padding-top: 24px; } - .choose-us-css .default-content-wrapper h2 { + .section.choose-us-css .default-content-wrapper h2 { font-size: 1.25rem; } - .choose-us-css .default-content-wrapper p { + .section.choose-us-css .default-content-wrapper p { font-size: .875rem; line-height: 1.25rem; } @@ -159,4 +163,41 @@ } } + +@media (min-width: 768px) and (max-width: 1024px) { + .section.choose-us-css .columns-wrapper .columns>div { + column-gap: 36px; + row-gap: 24px; + } + + .section.choose-us-css .columns-wrapper .columns>div { + grid-auto-rows: 1fr; + grid-template-columns: 1fr; + } + .section.choose-us-css .columns-wrapper .columns div div>p>picture>img { + height: 48px; + width: 40px; + } + .section.choose-us-css .columns-wrapper .columns div div :nth-child(2) { + color: #333; + font-family: 'Nunito-Bold',sans-serif; + font-size: 1pc; + font-weight: 700; + line-height: 24px; + padding: 8px 0 9pt; + } + .section.choose-us-css .columns-wrapper .columns>div:nth-child(2) { + padding-top: unset; + } +} + +@media (min-width: 900px) and (max-width: 1100px) { + .section.choose-us-css .columns-wrapper .columns>div { + grid-template-columns: 1fr 1fr; + } + .section.choose-us-css .columns-wrapper .columns>div:nth-child(2) { + padding-top: unset; + } +} + /* choose us end */ \ No newline at end of file diff --git a/styles/download-piramal/download-piramal.css b/styles/download-piramal/download-piramal.css index 6ba2331379..664ac0bedf 100644 --- a/styles/download-piramal/download-piramal.css +++ b/styles/download-piramal/download-piramal.css @@ -42,7 +42,7 @@ display: none; } -@media screen and (max-width: 767.99px) { +@media screen and (max-width: 767px) { .download-piramal-wrapper .default-content-wrapper h4, .download-piramal-wrapper .default-content-wrapper p:first-child img, @@ -73,7 +73,7 @@ font-weight: 700; line-height: 16px; padding: 8px 15px; - bottom: 75px; + bottom: 10px; left: 40px; } @@ -81,6 +81,11 @@ position: relative; left: 1%; } + + .section.download-piramal-wrapper .imgwithlink-wrapper .imgwithlink.block .image-href-mobile>a>picture img { + height: 176px; + width: 100%; + } } .section.download-piramal-wrapper div:nth-child(1)>.imgwithlink>.image-href-desktop>a>picture>img { @@ -140,7 +145,7 @@ width: 176px; display: block; } -@media screen and (min-width: 768px) and (max-width: 1024px) { +@media (min-width: 768px) and (max-width: 1024px) { .section.download-piramal-wrapper div:nth-child(1)>.imgwithlink>.image-href-desktop>a>picture>img{ min-height: 256px; } @@ -171,7 +176,7 @@ left: 260px; } } -@media screen and (max-width:768px) { +@media screen and (max-width:767px) { .section.download-piramal-wrapper div:nth-child(1)>.imgwithlink>.image-href-desktop>a>picture>img { height: 176px; min-height: 176px; diff --git a/styles/our-media/our-media.css b/styles/our-media/our-media.css index 6ce8cadbe4..09f856ca7b 100644 --- a/styles/our-media/our-media.css +++ b/styles/our-media/our-media.css @@ -1,4 +1,4 @@ -.our-media-wrapper .default-content-wrapper h4 { +.section.our-media-wrapper .default-content-wrapper h4 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; @@ -7,36 +7,56 @@ margin-bottom: 2rem; } -.our-media-wrapper .columns-wrapper .columns div { - justify-content: space-around; - flex-direction: row; +.section.our-media-wrapper .columns-wrapper .columns div { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0; + flex-direction: unset; } -.our-media-wrapper .columns-wrapper .columns .columns-img-col { +.section.our-media-wrapper .columns-wrapper .columns .columns-img-col { display: flex; padding: 0; + justify-content: center; } -.our-media-wrapper .columns-wrapper .columns div div > picture > img { +.section.our-media-wrapper .columns-wrapper .columns div div > picture > img { height: 100%; max-height: 30px; - width: 215px; -} - -.our-media-wrapper .columns-wrapper .columns div { - gap: 4.5rem; - padding: 0 9.5rem; + max-width: 215px; + width: 100%; } -@media screen and (max-width: 767.99px) { - .our-media-wrapper .columns-wrapper .columns div { +@media screen and (max-width: 767px) { + .section.our-media-wrapper .columns-wrapper .columns div { gap: 2rem; flex-direction: row; flex-wrap: wrap; padding: 0; + justify-content: space-around; } - .our-media-wrapper .columns-wrapper .columns .columns-img-col { + .section.our-media-wrapper .columns-wrapper .columns .columns-img-col { width: 45%; } + + .section.our-media-wrapper .default-content-wrapper h4 { + margin-bottom: 20px; + font-size: 14px; + line-height: 20px; + } + + .section.our-media-wrapper .columns-wrapper .columns div div > picture > img { + max-height: inherit; + max-width: inherit; + } +} + +@media (min-width: 768px) and (max-width: 1024px) { + .section.our-media-wrapper .columns-wrapper .columns div { + padding: 0; + justify-content: space-around; + } } diff --git a/styles/piramal-since/piramal-since.css b/styles/piramal-since/piramal-since.css index 94c5a79f87..1159d1d153 100644 --- a/styles/piramal-since/piramal-since.css +++ b/styles/piramal-since/piramal-since.css @@ -68,7 +68,7 @@ grid-template-columns: 1fr 1fr; } } -@media screen and (max-width:768px) { +@media screen and (max-width:767px) { .section.piramal-since-wrapper .default-content-wrapper h4{ font-size: 20px; line-height: 28px; diff --git a/styles/styles.css b/styles/styles.css index 371dd686e3..3f23073ea0 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -752,6 +752,12 @@ main img { } } +@media (min-width: 768px) and (max-width: 1024px) { + body { + padding-top: 71px !important; + } +} + @media (width >=900px) { .section.page-container>div { max-width: 1240px !important; @@ -840,5 +846,10 @@ main .section.highlight { .teaser.block { overflow: visible; - ; +} + +body.overlay-active { + position: fixed; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1111; } \ No newline at end of file