How to force content to be centered for mobile viewport-CodePudding

I'm new here and just started learning CSS. This is my first (question)post and maybe the format of my (question)post might not be appropriate.In that case I humbley ask your forgiveness. I'm not very successful in applying/editting css for my site. I'm trying to center (image)content in the @media only screen and (max-width: 420px)viewport. Searched,found and tried a few solutions for this issue as mentioned in this forum but to no avail. One of the problems is that my wordpress 6.x theme has a load of different style sheets and i have no clue in which order they operate. This is what i found browsing the style sheets; Beneath each code is the name of the css source file it came from. Can someone please point out which file i should edit and what code i should alter or apply? If needed i can give access to my site (which is local only atm) or post screenshots!

*source: responsive.min.css :

@media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body.boxed .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}.pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}

*source: responsive.css

@media only screen and (max-width: 420px){

body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
    width: 320px;
}

.header_bottom,
footer .container_inner,
nav.content_menu{
    padding: 0 15px;
}

.side_menu .close_side_menu_holder{
    right: 12px;
}

.pp_content {
    height: 250px !important;
}
.pp_hoverContainer{
    height: 200px !important;
}
nav.content_menu .nav_select_menu{
    border: none;
}

}

CodePudding user response：

The first file (responsive.min.css) is the minified version of the second file (responsive.css), that means that the minified version has no unuseful character like spaces, tabulations...

The minified version of assets like css, js and sometimes directly html page is used to avoid loading unuseful character and to make download faster. So your theme is probably using the minified version. I really suggest you edit responsive.css and then, thanks to lots of tools you find on the Internet, create the minified version and replace the existing one.

To center the content you have 2 ways:

Setting a fixed width for your content and then setting a margin: auto; property;
Setting the container of your content to display:flex and then setting your content to justify-content: center;

CodePudding user response：

You can check if certain input fields are not filled using the isset() function in PHP: For example:

if (isset($_POST['sku']) {
  //exists
}

While to check if the product already exists you have to check if it exists in database so you must necessarily make a query.