Blogger Dynamic Views FLIPCARD: How to increase width of Pop-Up panel on Mobile devices?

Question

My Blog is https://testfnm12.blogspot.com based on the Blogger Dynamic views FLIPCARD theme.

On MOBILE devices the white Pop-up panel is much too narrow as shown in this screenshot:

My blog is to showcase my photographs so I would like the pop-up panel to be full screen width so that the photos are displayed as large as possible.

I tried making the panel wider by using this CSS: .overview-wrap{ width: 105% !important; } .overview-wrap{ width: 105% !important; } This does increase the width of the Pop-up panel, but unfortunately the panel is now off-center and goes off the right edge of the screen, as seen in this screenshot:

I have no idea how to center the panel, and indeed I am not even certain that this is the right CSS to use to make the Pop-up panel the full width of the screen.

I would be most grateful if someone would please tell me how to make the pop-up panel occupy the full width of the Mobile screen. Thanks!

Answer 1

I have figured out the answer myself. Using this CSS will make the Pop-Up panel wider to the full width of the Mobile screen:

@media screen and (max-width: 768px) {
.overview-wrap{
width: 110%;
margin: -8vw !important;
}
}