diff --git a/mobileStyles.css b/mobileStyles.css index 637ce7a..384d128 100644 --- a/mobileStyles.css +++ b/mobileStyles.css @@ -245,10 +245,12 @@ } } + @media only screen and (max-width: 500px) { .btnFluxcore2, .btnFluxcore, .btnExtra{ width: 80% !important; margin-right: 0px; + display: block; } header{ background-position: 25%; @@ -382,6 +384,24 @@ } } +/* Adjust styles for screens smaller than 650px */ +@media only screen and (max-width: 650px) { + .subtext7 { + width: 100%; + font-size: 15px; + } + .btnFluxcore2, .btnExtra { + display: block; + width: 100%; + text-align: center; + margin: 10px 0; + } + .btnExtra { + margin-top: 5px; + } +} + + @media only screen and (max-width: 1000px) { @@ -842,4 +862,51 @@ nav ul.responsive li { display: block; } - } \ No newline at end of file + } + +/* Ensure images scale correctly and maintain their shape */ +.gridBox img { + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; +} + +/* Adjust the grid layout and images for smaller screens */ +@media only screen and (max-width: 650px) { + .daPerks { + display: flex; + flex-direction: column; + align-items: center; + } + .gridBox { + width: 90%; + margin: 10px auto; + overflow: hidden; /* Ensure content stays within the box */ + text-align: center; /* Center-align text and elements within gridBox */ + padding: 20px; /* Add padding to ensure space around content */ + box-sizing: border-box; /* Include padding in the element's total width and height */ + } + .iconCont { + width: 100px; /* Fixed size to maintain circular shape */ + height: 100px; /* Fixed size to maintain circular shape */ + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto 10px auto; /* Center the icon container and add margin below */ + overflow: hidden; /* Hide overflow to maintain shape */ + border-radius: 50%; /* Maintain circular shape */ + background-color: #f5f5f5; /* Optional: add a background color */ + } + .iconCont img { + width: 100%; + height: 100%; + object-fit: cover; /* Ensure the image covers the container without distortion */ + } + .gridBox h2 { + margin-top: 10px; /* Add margin to ensure space between icon and heading */ + } + .gridBox p { + margin-top: 10px; /* Add margin to ensure space between heading and text */ + } +}