Question By

Jul 9th, 2023. Last update Jul 17th, 2023

Solved

Back to All Questions

CSS Styling issues

Solved

kaprinkey1 ・

Jul 9th, 2023 01:11 AM

CSS Styling issues

I am making my portfolio site using straight HTML5 and CSS3. My desktop version looks great albeit it needs minor tweaking to center some things and what not. However, the mobile version does not inherit the styling for my contact and disclaimer.html files. I am using @media queries and I checked the queries with CHATGPT and according to the bot, the queries are correct and therefore I am stuck at this point. My CSS code is posted below.

Disclaimer and Contact files

My disclaimer and contact.html files do inherit the global styling for things like the nav, body and footers, but that is it for mobile browsers.

If you browse to the site both via desktop and mobile browser, you will see the difference and it only happens on the pages I mentioned?

The HTML code is below the css code. If someone help me understand what I am doing wrong, I would greatly appreciate it!

CSS file

/* Variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */

:root {
    --black: #171321;
    --dkblue: #0d314b;
    --plum: #4b0d49;
    --hotmag: #ff17e4;
    --magenta: #e310cb;
    --aqua: #86fbfb;
    --white: #f7f8fa;
    --red: #ff0000;
    --lightred: #FFCCCB;
    --green: #006400;
    --blue: #0000FF;
    --lightblue: #ADD8E6;
    --font-size: 1.3rem;
    --mono: "Oxygen mono", monospace;
    --sans: Oxygen, sans-serif;
    --rubik: Rubik Maze;
  }

/* border box model: https://css-tricks.com/box-sizing/ */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* generic styles for the page */

body {
    padding: 0;
    margin: 0;
    font-family: var(--sans);
    background-color: var(--black);
    color: var(--white);
    font-size: var(--font-size);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--rubik);
    font-weight: normal;
}

a {
    color: var(--hotmag);
}

a:hover {
    color: var(--dkblue);
    text-decoration: none;
}

img {
    width: 100%;
    max-width: 500px;
}


/* background color divs */

.section-plum {
    background-color: var(--plum);
}

.section-blue {
    background-color: var(--dkblue);
}

.gradient {
    background: linear-gradient(90deg, rgba(255, 23, 228, 1) 0%, rgba(134, 251, 251, 1) 100%);
    height: 2px;
}


/* intro styles */

#intro {
    padding: 4rem 1rem 10rem 1rem;
    padding-bottom: 10rem;
    max-width: 1200px;
    margin: 0 auto;
}

#intro p {
    font-size: 1rem;
    line-height: 1.5;
}

#intro .name {
    font-family: var(--mono);
    font-size: 1rem;
}

.name span {
    font-family: var(--sans);
    font-size: 4rem;
    color: var(--aqua);
    display: block;
    font-weight: 300;
}

#intro h2 {
    font-size: 4rem;
}


/* contact section */

#contact {
    width: 400px;
    text-align: center;
    margin: 0 auto;
    padding: 4rem 0;
}

#contact p:last-child {
    margin-top: 3rem;
}


/* navigation */

nav {
    font-family: var(--mono);
    font-size: 80%;
    padding: 4rem 1rem;
}

nav h1 a {
    font-family: var(--sans);
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

nav li:first-child {
    flex-basis: 100%;
    text-align: center;
}

nav [class*="fa-"] {
    font-size: 150%;
    color: var(--aqua);
}

nav h1 [class*="fa-"] {
    font-size: 100%;
    color: var(--aqua);
}

nav a {
    color: white;
    text-decoration: none;
    display: block;
}

nav a:hover,
nav [class*="fa-"]:hover {
    color: var(--magenta);
}

.button {
    background-color: var(--magenta);
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-family: var(--mono);
}

.button:hover {
    color: white;
    background-color: var(--dkblue);
}


/* projects section */

#projects {
    padding: 4rem 1rem;
    margin: 2rem;
}

#projects h2 {
    font-size: 2.5rem;
    margin-bottom: calc(2.5rem * 1.5);
}

#projects h3 {
    color: var(--aqua);
}

#projects h4 {
    font-size: 1rem;
    font-family: var(--mono);
    margin: 0;
}

.blackbox {
    padding: 1.5rem;
    border-radius: 10px;
    color: white;
    background-color: var(--black);
    font-size: 1rem;
    line-height: 1.5;
}

#projects ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 1rem;
}

#projects img {
    margin: 2rem 0 4rem 0;
    padding: 1rem;
    border-left: 1px solid var(--aqua);
    border-top: 1px solid var(--aqua);
    border-radius: 25px;
}


/* footer section */

footer {
    text-align: center;
    padding: 4rem 0;
}

footer ul {
    list-style-type: none;
    padding: 0;
    margin: 2rem 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 3rem;
    font-size: 3rem;
}

@media (min-width: 800px) {
    article {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }
    #projects {
        max-width: 1200px;
        margin: 0 auto;
    }
    #projects img {
        grid-column: 1/6;
        grid-row: 1/2;
        
    }
    .text {
        grid-column: 5/11;
        grid-row: 1/2;
        order: 2;
        text-align: right;
    }
    #projects ul {
        justify-content: flex-end;
    }
    #projects .reverse .text {
        grid-column: 1/7;
        order: 2;
        text-align: left;
    }
    #projects .reverse img {
        grid-column: 6/11;
        grid-row: 1/2;
    }
    #projects .reverse ul {
        justify-content: flex-start;
    }
}

@media (min-width: 850px) {
    nav {
        max-width: 1200px;
        margin: 0 auto;
    }
    nav li:first-child {
        flex-basis: auto;
        text-align: left;
        margin-right: auto;
    }

.link {
    background-color: var(--magenta);
    color: white;
    padding: 0.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--rubik);
}
.link:hover {
    color: white;
    background-color: var(--dkblue);
}

     /* disclaimer section */
    


.disclaimer p {
    font-size: 1.2rem;
    line-height: 1.6;
    
}

.disclaimer ol {
    padding-left: 2.0rem;
    margin-top: 2rem;
    justify-self: unset;
}

.disclaimer ol li::marker {
    color: var(--hotmag);
  }
      
    .disclaimer h1 {
        color: var(--gray);
        justify-content: center;
        align-items: center;
    }
/* contact section */
    
.contact-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contact-form {
    background-color: var(--black);
    color: var(--white);
    padding: 2rem;
    border-radius: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.contact-form h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    border: none;
    background-color: var(--dkblue);
    color: var(--white);
}

.contact-form button {
    background-color: var(--magenta);
    color: var(--white);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.contact-form button:hover {
    background-color: var(--dkblue);
}

.contact-form label[for="consent"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-form label[for="consent"] input[type="checkbox"] {
    margin: 0;
}

@media (min-width: 900px) {
    .contact-form-container {
        display: block;
    }
}
}

HTML file

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Rubik+Maze&family=Rubik+Maze&display=swap" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/styles.css">
  <title>Keith Prinkey Portfolio</title>
</head>

<body>
  <nav>
    <ul>
      <li>
        <h1>
          <a href="/">
            <span class="fa-solid fa-code"></span>
            <span>Keith Prinkey SR</span>
          </a>
        </h1>
      </li>
      <li><a href="index.html#projects" title="Projects">Projects</a></li>
      <li><a href="/disclaimer" title="Disclaimer">Disclaimer</a></li>
      <li><a href="about.html" title="About-Me">About</a></li>
      <li><a href="/contact" title="Contact-Us">Contact-Us</a></li>
      <li>
        <a href="https://www.linkedin.com/in/keith-prinkey-it/" target="_blank" title="LinkedIn">
          <span class="fab fa-linkedin fa-flip" aria-hidden="true"></span>
          <span class="sr-only">LinkedIn</span>
        </a>
      </li>
      <li>
        <a href="https://www.github.com/KeithPrinkey-ops" target="blank" title="Github">
          <span class="fa-brands fa-square-github fa-flip" aria-hidden="true"></span>
          <span class="sr-only">Github</span>
        </a>
      </li>
      <li>
        <a href="https://ccmo-my.sharepoint.com/:w:/g/personal/kaprinkey1_ccis_edu/EQal-1ibmgJOpuiT3DcNo9wB_vwnSysnmU27i4ybBJH0HQ?e=z0vKep" target="_blank" title="Resume" class="button">Resume</a>
      </li>
    </ul>
  </nav>

  <h1>Contact Me</h1>

  <div class="gradient">
    <br>
    <div class="contact-form-container">
      <form class="contact-form">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>
        <label for="reason">Reason for Contact:</label><br>
        <textarea id="reason" name="reason" required></textarea><br>
        <label for="service">Services needed?</label><br>
        <select id="service" name="service">
          <option value="website">Website</option>
          <option value="domain">Domain Management</option>
          <option value="server">Server Management</option>
        </select><br>
        <label for="consent">Consent to be contacted:</label><br>
        <input type="checkbox" id="consent" name="consent" required>
        <button type="submit">Submit</button>
      </form>
    </div>

    <br>
    <br>

    <footer>
      <h2>Keith Prinkey &middot; Software Developer</h2>
      <ul>
        <li>
          <a href="https://www.linkedin.com/in/keith-prinkey-it/" target="_blank">
            <span class="fab fa-linkedin" aria-hidden="true"></span>
            <span class="sr-only">LinkedIn</span>
          </a>
        </li>
        <li>
          <a href="https://www.github.com/keithprinkey-ops" target="_blank">
            <span class="fab fa-github-square" aria-hidden="true"></span>
            <span class="sr-only">Github</span>
          </a>
        </li>
        <li>
          <a href="mailto:[email protected]" target="_blank">
            <span class="fas fa-envelope" aria-hidden="true"></span>
            <span class="sr-only">Email</span>
          </a>
        </li>
      </ul>
      <p>
        <small>&copy; 2021 Keith Prinkey SR. All rights reserved.<br>
          Disclaimer: The Twitch logo used in this portfolio project is the registered trademark of Twitch Interactive, Inc., or its affiliates. The logo has been used for the purposes of academic display and discussion only. There is no endorsement or sponsorship implied, nor is there any relationship between the portfolio author and Twitch Interactive, Inc. All rights and credits go to the original rights holder.
        </small>
      </p>
    </footer>
  </div>
</body>

</html>

Report

bobbyiliev ・

Jul 9th, 2023 01:33 AM

・

Best Answer

Hi there,

A few things that I've noticed from a quick glance:

In your media query for min-width: 900px, the style rules for the disclaimer and contact section are placed within the scope of the media query for min-width: 850px. This could be causing an issue as the styles will only apply for viewports 900px or larger within the scope of the 850px query. Please make sure to close the 850px media query bracket before opening the 900px media query bracket.
The other issue I see is related to your HTML code snippet. It seems to be cut off at the bottom. The form's closing tag </form> and the div's closing tag </div> are not visible in the HTML code you shared. If the closing tags aren't present in your actual code, this could cause issues with your layout and styling. Please ensure all your HTML elements are properly closed.
I didn't see any CSS rules targeting mobile viewports specifically. For a mobile-first approach, you would typically define styles outside of any media query first (these would apply to mobile viewports), and then use media queries to adjust styles for larger (tablet, desktop) viewports. If your styles aren't applying correctly on mobile, you may need to add or adjust your media queries.
Also, ensure that the links to your CSS and HTML files are correct and that all files are saved in the specified paths. Incorrect file paths can cause your styles not to be applied.

From your provided code, I could not find any specific errors that would cause the mobile version of your site not to apply the CSS styles for the contact and disclaimer.html files. However, it seems that the disclaimer section styles were applied only for screen sizes of min-width: 850px, which may exclude some mobile devices.

To ensure these styles apply on mobile devices too, you might want to include the .disclaimer and .contact-form styles outside of the media query.

In addition, in the HTML code, the

with class contact-form-container is not closed properly, this may affect the layout.

Here are the corrected versions of your files:

The CSS:

/* Variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */

/* Existing code goes here... */

.disclaimer p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.disclaimer ol {
    padding-left: 2.0rem;
    margin-top: 2rem;
    justify-self: unset;
}

.disclaimer ol li::marker {
    color: var(--hotmag);
}

.disclaimer h1 {
    color: var(--gray);
    justify-content: center;
    align-items: center;
}

.contact-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.contact-form {
    background-color: var(--black);
    color: var(--white);
    padding: 2rem;
    border-radius: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.contact-form h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    border: none;
    background-color: var(--dkblue);
    color: var(--white);
}

.contact-form button {
    background-color: var(--magenta);
    color: var(--white);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.contact-form button:hover {
    background-color: var(--dkblue);
}

.contact-form label[for="consent"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-form label[for="consent"] input[type="checkbox"] {
    margin: 0;
}

@media (min-width: 900px) {
    .contact-form-container {
        display: block;
    }
}

/* Existing media queries go here... */

The HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Meta and link tags here -->
</head>

<body>
  <!-- Navigation code here -->

  <h1>Contact Me</h1>

  <div class="gradient"></div>

  <div class="contact-form-container">
    <form class="contact-form">
      <!-- form elements here -->
    </form>
  </div> <!-- Closing the 'contact-form-container' div -->

  <!-- Footer code here -->
</body>

</html>

Please replace the comments in the corrected versions with the corresponding sections of your original files.

Report

kaprinkey1 ・

Jul 10th, 2023 11:53 AM

Thanks Bobby. Ill let ya know if it worked or not.

Report

kaprinkey1 ・

Jul 17th, 2023 05:35 PM

You were right. The media queries were cutting off the styles.

Report

Tails

Blocks

Wave

Pines

Auth

Designer comingsoon

DevBlog comingsoon

Static

SaaS Adventure

CSS Styling issues

CSS Styling issues

Disclaimer and Contact files

CSS file

HTML file