Mobile First CSS Conversion

January 6, 2025 · AI Conversations

User

@media (min-width:767px){
.header-button{
display:none !important;
}
.swiper-slide img {
aspect-ratio: 1 / 0.5;
}
.slider-arrow .image-content-wrapper {
position: relative;
display: inline-block;
}

.slider-arrow .image-content-wrapper::after {
position: absolute;
bottom: 20px;
right: 20px;
content: '';
width: 40px;
height: 40px;
background-image: url(/app/uploads/2024/12/arrow_insert_24dp_5F6368_FILL0_wght300_GRAD-25_opsz24.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.br-hide{
display:none;
}
}

@media (max-width:767px){
.header-button a{
background-color: $color-primary;
color: $color-white !important;
border: 1px solid $color-primary;
border-radius: 5px;
padding: 8px 14px !important;
font-weight: 300 !important;
margin-left:8px !important;
}
.header-button a:hover{
background-color: $color-white;
color: $color-primary !important;
border: 1px solid $color-primary;
border-radius: 5px;
font-weight: 300 !important;
}
.owl-nav {
display: none;
}
.swiperslides {
width: 100%;
height: 500px !important;
}

.swiperslides .slide-content {
width: 100% !important;
transform: unset !important;
height: auto !important;
bottom: 0 !important;
top: unset !important;
}
.swiperslides img {
aspect-ratio: 1 / 0.5 !important;
}
.image-content-wrapper:hover img {
transform: unset !important;
}
.owl-slider-section img {
aspect-ratio: 1 / 1.41 !important;
border-radius: 5px;
object-fit: cover;

}
}
Convert above to mobile first

Assistant

To convert the provided CSS to a **mobile-first approach**, we define the base styles first (applying them for mobile devices by default), and then override these styles for larger screen sizes using `@media (min-width: 767px)`. Here's the refactored code:

.header-button a {
    background-color: $color-primary;
    color: $color-white !important;
    border: 1px solid $color-primary;
    border-radius: 5px;
    padding: 8px 14px !important;
    font-weight: 300 !important;
    margin-left: 8px !important;
}

.header-button a:hover {
    background-color: $color-white;
    color: $color-primary !important;
    border: 1px solid $color-primary;
    border-radius: 5px;
    font-weight: 300 !important;
}

.owl-nav {
    display: none;
}

.swiperslides {
    width: 100%;
    height: 500px !important;
}

.swiperslides .slide-content {
    width: 100% !important;
    transform: unset !important;
    height: auto !important;
    bottom: 0 !important;
    top: unset !important;
}

.swiperslides img {
    aspect-ratio: 1 / 0.5 !important;
}

.image-content-wrapper:hover img {
    transform: unset !important;
}

.owl-slider-section img {
    aspect-ratio: 1 / 1.41 !important;
    border-radius: 5px;
    object-fit: cover;
}

.br-hide {
    display: none;
}

@media (min-width: 767px) {
    .header-button {
        display: none !important;
    }

    .swiper-slide img {
        aspect-ratio: 1 / 0.5;
    }

    .slider-arrow .image-content-wrapper {
        position: relative;
        display: inline-block;
    }

    .slider-arrow .image-content-wrapper::after {
        position: absolute;
        bottom: 20px;
        right: 20px;
        content: '';
        width: 40px;
        height: 40px;
        background-image: url(/app/uploads/2024/12/arrow_insert_24dp_5F6368_FILL0_wght300_GRAD-25_opsz24.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

### Key Changes:
1. **Base styles** are for small screens (mobile-first), so no `@media` query is applied initially.
2. Styles specific to larger screens (e.g., hiding `.header-button`) are moved under the `@media (min-width: 767px)` query.
3. Removed duplicate styles where possible.
4. Grouped related styles together to maintain clarity.

This structure ensures better performance and scalability as per mobile-first design principles.

Mobile First CSS Conversion

Leave a Comment Cancel