How can I align my Dawn Theme homepage for mobile view?

Store Design
,

Topic summary

A user seeks help aligning their Dawn theme homepage for mobile view. They want the mobile layout to match the desktop version’s side-by-side arrangement.

Problem:

  • Mobile view displays elements stacked vertically
  • Desktop shows items arranged horizontally (side-by-side)
  • User provided screenshots showing the current mobile layout versus desired desktop layout

Solution Provided:
A community member offered CSS code modifications:

  • Navigate to Store > Theme > Edit Code
  • Locate and open “base.css” file
  • Add custom CSS at the end targeting mobile screens (max-width: 767px)
  • Code includes flexbox adjustments and styling for selection boxes and images

Status: Solution proposed but not yet confirmed as implemented or successful. The CSS snippet addresses alignment, spacing, and responsive behavior for the homepage elements.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

How do I make the mobile view of this:

Screenshot 2023-01-20 at 10.17.57.png
Screenshot 2023-01-20 at 10.17.57.png566×1166 251 KB

Look like the desktop version (side by side), like this:

Screenshot 2023-01-20 at 10.19.42.png
Screenshot 2023-01-20 at 10.19.42.png1586×1012 162 KB

2

@Tiff0011 ,Share the password.

3

@oscprofessional

My website page is https://tiffenyofficial.com/

Password is ‘pix’

4

@Tiff0011

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file "base.css " and open.

step 02:

  1. Paste the code at the end of the file.
@media only screen and (max-width:767px){
.align-items-center {
    align-items: center!important;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
}
.selection-box .col-md-6.p-0 {
    width: 50%;
}
.hot-item a img {
    height: 200px;
    object-fit: cover;
}
#hot_selection .selection-box .hot-slider .hot-item img {
    padding: 10px;
    width: 100%;
}

#hot_selection .selection-box .hot-slider .hot-item {
    text-align: center;
    max-width: 63%;
}
}

this idea helps you