When phone device is on landscape mode, css starts to screw up - html

Question

I'm currently making this website for a company as a student intern learning and I was wondering how I could fix this issue where my product containers and promotion containers, when flipped or on a smaller phone it does not fix and the text and or buttons are out of the container. How can I fix this? I understand media queries but I don't have a full grasp on how I can even fix this with css.
HTML (Products)
<?php
require_once 'includes/dbh-inc.php';
$current_file_name = basename($_SERVER['PHP_SELF']);
$result2 = mysqli_query($conn,"SELECT `serviceID` FROM `addService` WHERE servicePageName = '".$current_file_name."'");
$row2 = mysqli_fetch_array($result2);
$ID2 = $row2['serviceID'];
$sql = "SELECT * FROM addProduct WHERE serviceID = '$ID2'";
$result = $conn-> query($sql);
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
echo '<div class="product-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['imagetmp']).')">';
echo '<div class="service-title">';
echo '<h1>'. $row["product"] .'</h1>';
echo '</div>';
echo '</div>';
}
echo '</div>';
echo '</div>';
}
?>
CSS (Products)
/* Services Section */
.services-section {
background-attachment: fixed;
background-size: cover;
background-position: center;
justify-content: center;
}
.services-section a {
}
.services-section h1 {
color: var(--clr-text);
font-size: 3.5rem;
text-decoration: underline;
}
.services-section h2 {
color: var(--clr-text);
font-size: 2.5rem;
text-decoration: underline;
}
.title-section {
display: flex;
justify-content: center;
align-items: center;
padding: 2em;
}
.services {
display: grid;
gap: 10px;
margin-top: 1em;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
justify-items: center;
}
.service-title {
display: flex;
justify-content: center;
background-color: var(--clr-background);
border: var(--clr-bg-border);
align-items: center;
flex-direction: column;
height: fixed;
width: fixed;
}
.service-container {
border: 5px solid var(--clr-primary);
background-size: cover;
background-position: center;
background-color: black;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 30vh;
margin-bottom: 5vh;
}
.service-container i {
color: white;
padding: 0.5em;
float: right;
}
.service-container h1 {
color: var(--clr-text);
padding: 0.5em;
font-size: 1.5rem;
}
.service-container h2 {
color: var(--clr-text);
padding: 0.5em;
font-size: 1.5rem;
}
.service-container h1:hover {
color: var(--clr-secondary-text);
transition: ease 650ms;
}
.service-button {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2em;
}
.service-button a {
background-color: var(--clr-primary);
color: var(--clr-text);
text-decoration: none;
font-size: 2em;
padding: 0.5em;
}
.service-button a:hover {
color: black;
background-color: yellow;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
transition: ease 650ms;
}
.service-about {
display: flex;
justify-content: center;
background-color: var(--clr-background);
border: var(--clr-bg-border);
padding: 1em;
margin: 1em;
height: fixed;
width: fixed;
}
.service-about p {
color: var(--clr-text);
text-align: center;
font-size: 1.5rem;
}
.service-about span {
color: var(--clr-secondary-text);
text-align: center;
font-size: 1.5rem;
}
.service-about a {
color: var(--clr-secondary-text);
text-align: center;
font-size: 1.5rem;
}
.featured-services {
display: grid;
gap: 10px;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
justify-items: center;
}
HTML (Promotion)
<div class="promotions">
<?php
require_once 'includes/dbh-inc.php';
$sql = "SELECT clientName, startDate, endDate FROM Clients";
$result = $conn-> query($sql);
$currentDate = date('Y-m-d');
$currentDate = date('Y-m-d', strtotime($currentDate));
$promotion;
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
if (($currentDate >= $row["startDate"]) && ($currentDate <= $row["endDate"])){
echo '<div class="promotion-container">';
echo '<div class="promotion-text">';
echo '<h1> '. $row["clientName"] .' is currently having a promotion.</h1>';
echo '</div>';
echo '<div class="promotion-button">';
echo '<button>Click Here</button>';
echo '</div>';
echo '</div>';
}
}
}
?>
</div>
CSS (Promotion)
/* PROMOTION PAGE */
.promotions {
min-height: 100vh;
display: grid;
color: var(--clr-text);
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
text-align: center;
justify-items: center;
margin-top: 1em;
}
.promotion-container {
border: 5px solid var(--clr-primary);
height: 20vh;
width: 30vh;
background-color: black;
}
.promotion-text h1 {
font-size: 1.15rem;
padding: 1em;
}
.promotion-button {
display: flex;
justify-content: center;
padding: 1em;
}
.promotion-button button {
color: var(--clr-text);
background-color: var(--clr-primary);
font-size: 1.15rem;
}
Image of my current issue

Answer 1

There are minimum two options:
You can customize your styles using flexbox or grid advantages.
You can write some styles for landscape orientation:
#media (orientation: landscape) {
// your specific styles for landscape
}
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/orientation