Cargo website customize css for mobile only

Question

My website looks good on desktop but on mobile version, the header is in a weird placement. How do i change the header font size and placement without it changing for desktop version.

Also my images look good on desktop but it's all jammed together on mobile version, how do I customize css to comtrol image size on mobile version only?

I tried to change the css but it changed the sizes of desktop version as well

Answer 1

You can easily determine css style for desktop and mobile differently with the @media (min-width: 768px)

Try the CSS for header:

/* Define styles for desktop */
@media (min-width: 768px) {
.header {
    /* Desktop styles */
    font-size: 24px; /* Example font size */
    /* Add any other desktop-specific styles */
  }
}

/* Define styles for mobile */
@media (max-width: 767px) {
.header {
    /* Mobile styles */
    font-size: 16px; /* Example 
font size */
    /* Add any other mobile- specific styles */
  }
}

Replace .header with the appropriate class or ID for your header element.

To Customizing Image Size for Mobile try:

/* Define styles for desktop */
.image {
  width: 200px; /* Example width */
  height: auto; /* Maintain aspect ratio */
  /* Add any other desktop-specific styles */
}

/* Define styles for mobile */
@media (max-width: 767px) {
  .image {
      width: 100px; /* Example width for mobile */
      /* Adjust as needed */
  }
}

Replace .image with the appropriate class or selector for your image elements and give your desired width size.