Beginner coder needs help with responsive design on custom content

Technical Q&A
1

Im currently designing a site for a client. I built in custom content for the callouts. The problem comes when I switch to mobile.

.container1 { background-color: #dcdfdf; padding-top: 50px; padding-right: 35px; padding-left: 35px; padding-bottom: 50px; }

HYDRATING

Calcium, Magnesium, Potassium

Screen Shot 2021-06-08 at 2.53.17 PM.png
Screen Shot 2021-06-08 at 2.53.17 PM.png2664×792 160 KB

nothing special. But on mobile I need to make these boxes span 100% rather than 50% like on desktop. Im sure I might also need to reduce the text size.

Can some give this newbieish designer some pointers?

2

You should make use of media queries to do device size specific CSS:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The exact px value to use will depend on your current theme, but if you look in your theme.scss.liquid file (or similar), you should find some examples like:

@media only screen and (max-width: 700px) {
  // mobile CSS
}

@media only screen and (min-width: 701px) {
  // tablet/desktop CSS
}