Getting Things Aligned on Mobile

Also I am trying to get the free delivery icon and the text “PURCHASE 10 OR MORE MEALS FOR FREE DELIVERY” closer together and aligned as well if you can help me out with that too.

Okay so a few things about this code:

1. For the section with the icons I created the unique section ID “custom-section”. I placed this code in the custom css section.

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
#custom-section div div .flex_column {
width: 24% !important;
margin-right: 1% !important;
}
}

I am not sure what this code is for:

.template-page {
padding: 28px !important;
}

I edited the first column, set it to have an equal height then set “Vertical Alignment” to “Middle” and that didn’t do much of anything. So I took off the equal height and it worked but the icons were too far over to the right, so I dropped the width percent down to 20% and it works perfectly. Can you explain what the second piece of code is for?

2. I tried creating another unique section ID for the “choose how to get your meals section” and then copying that block of code and changing the ID but it isn’t doing anything for that specific section. I also tried again to set the equal height and also added in that extra code I am not sure what it’s for but that didn’t do anything either.

3. Am I only able to create a “unique section ID” in the color section? I was trying to apply it to the meal pick up location text and line as well.

Okay so I took off the custom section ID for “choose how to get your meals” because it wasn’t working. I put it back in there so you can see on mobile what’s going on, the positioning is all screwed up on mobile and the two column are now overlapping. I can’t think that it’s because it has multiple columns…the other section with the icons had 4 columns.

I threw both the “meal pick-up location” and “testimonials” in a color section to create the section ID and oddly testimonials is centered on mobile without actually putting in a custom section ID at all. Meal pick up location on the other hand is not doing anything when I create the custom section ID. I have tried taking the map out of that color section to see if the map was the issue but the header and line underneath are still not centering on mobile.

I am giving you access to the backend.

ahhhh now I remember why I had this code:

.template-page {
padding: 25px !important;
}

it was to decrease the padding between the nav bar/logo area and my layerslider. Just checked it again and realized that theres a big gap again and when I reviewed my notes I remembered that code was for.

No I never got a response to the above post on this thread “I removed it and both sections still aren’t aligning right. In the choose how to get your meals section both columns are overlapping now and with the meal pick up location text/line things aren’t centered.” And the block of code he told me to remove was controlling the custom padding between the nav bar/logo area and my layerslider, so now that is screwed up again.

https://kriesi.at/support/topic/decreasing-padding-between-logonav-bar-and-first-item-on-homepage

okay so that increased the padding in between the header by a ton, so I took it down to 5px and it’s still too large so I left it at 0 and it seems to still be large. I obviously want to fix the padding on the header but what I am more concerned about is the “Choose How to Get Your Meals” section. How both columns are overlapping on mobile. You had originally said that block of code that was used to control the padding was getting in the way of centering all of my content so I removed that and nothing has been resolved. I already gave you access to the backend, if you need to go in and play around with stuff.

Yes I originally wanted to arrange the budget section that way but I couldn’t get the text to line up next to the plate the way I wanted to, I will play around with it some more I am assuming I need to place it with css in the exact position. So what about the meal location header, that still isn’t centered.