We help IT Professionals succeed at work.

What do I change on my media query to get the content to stack and center on mobile device?

dgarofalo
dgarofalo used Ask the Experts™
on
I have the following website where I am struggling with the responsive view.

https://posc.church/

I want the other sections such as the map and service times to look like the
section that reads Everyone welcome... Also, I want the hero image to be only
150px high.

Basically, I want the content to stack evenly in the mobile view.

Can someone point me in the right direction? Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Get rid of the flex-container class if you are not using it.  You arelady have your main.col-md-12 site-main main-content.  Add a "row" class as a div that contains both the service-times and map. Then for each, add a class to create two columns for medium and above like "col-md-6". This will split in two for non phones and will stack for phones.