update of "Explore AMP success stories" section

[Rupantar-Borphukan]

Description

In above attachment, in the home page during scrolling down found bug.
"Explore AMP success stories" section be align between and now it is little shifted to right (therefore the UI is not looking good). It is ok for mobile application but the issue is there for desktop and laptop.

I can solve the issue (fix the bug). Can I try to solve the issue ?

Reproduction Steps

N/A

Relevant Logs

N/A

Browser(s) Affected

No response

OS(s) Affected

N/A

Device(s) Affected

Dell Vostro

AMP Version Affected

No response

[sankha1545]

To resolve the alignment issue for the "Explore AMP success stories" section and make it more visually appealing for desktop and laptop screens, you can use custom CSS to center-align the content. Here's how you can do it:

CSS Code:

@media screen and (min-width: 768px) {
.amp-success-stories {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
padding: 20px;
max-width: 1200px; /* Adjust the maximum width as needed */
}
}

Steps to Implement:

1. Locate the CSS class or container used for the "Explore AMP success stories" section. For this example, the class .amp-success-stories is used. Replace it with the actual class or ID from your codebase.

2. Add the above CSS snippet to your stylesheet or within a <style> tag in your HTML file.

---

Expected Outcome:

1. The section will be properly centered on larger screens, enhancing the overall appearance and usability.

2. The design will remain responsive for mobile devices, preserving its current alignment.