Need Some Advice For Media Queries

Question

I'm somewhere between novice and intermediate with web design. I'm building a site for myself in Wp (Astra theme) using Elementor. I'm previewing the pages in Edge, Safari, Chrome and Firefox dev tools. When I toggle through the different smartphone models, my text is right against the edges of the screen (portrait mode). I want to put 8px for left and right padding to give the text breathing room.

I started setting up media queries in the Astra Theme > Additional CSS panel, so the values would apply to every page. Just to see if this would have any impact, I put this CSS for an h1 class I created:

@media screen and (max-width:767px){
}
.h1-center{text-align:center; padding-left:8px;padding-right:8px;
 }

}

I know this isn’t complete, (no min value), but I am seeing the padding push the text away from the edge. What should I put in for min and max values? There are many different viewports for phones, so I’m not sure how to set this up. LMK if you need more information.

Answer 1

Here is an example of media query max, min-width.

@media screen and (max-width: 767px) and (min-width: 600px) {
    .h1-center {
        text-align: center;
        padding-left: 8px;
        padding-right: 8px;
    }
}