Okay sorry but I keep adding that code and it’s just not doing anything.

So I am looking at it and it totally works, one thing what block of code is now controlling the padding between the logo and the slider? I need to increase that.

well I still can’t get the meal pickup location header text and line underneath to center. He said he cleaned up my code but that still isn’t working.

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.

so how would I go about getting a regular image full width then? I have searched on the forums and can’t find anyone who has already asked that.

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.

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

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.

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.

woohoo it worked! Thanks you can close the thread now :)

So I added that but it’s not doing anything. I will include the username and password to access the backend.

actually you know what never mind you can close this thread thank you!

Also with the icons on the homepage is there a way to get the header text so that it’s evenly spaced out and doesn’t break into 2 lines?

Yes vertically centered!

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.