Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #844240

    I am trying to make the homepage look aligned when viewing on mobile. I have 4 icons “non-gmo, nut-free, dairy-free and gluten-free”. On mobile they stack vertically, what I’d like to do is have them shrink smaller and line up horizontally on the screen like when viewing on desktop. Also some of the other images/buttons align to the right on mobile view as well as some of the headings and separators. Is this an easy fix?

    #844243

    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.

    #845623

    Hi,

    Thank you for using Enfold.

    1.) Please edit the color section that contains the columns, add a unique Section ID to it (use “custom-section” for example) then add the following css code.

    @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;
      }
    }
    

    What is this code for?

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

    It breaks the layout of the columns.

    2.) Please edit the first column, set it to have an equal height then set “Vertical Alignment” to “Middle”.

    Best regards,
    Ismael

    #845887

    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.

    #846725

    Hi,

    1.) Looks like the code is working but try to increase the width to 23% or 24% and remove the css code.

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

    2.) I’m not seeing the custom Section ID in the “CHOOSE HOW TO GET YOUR MEALS” section. What do you want to do with it?

    3.)The “Meal Pickup Location” is not inside a color section.

    Best regards,
    Ismael

    #847206

    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.

    #847281

    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?

    #847587

    Hi,

    Again, things are not centered because of the following css modification.

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

    Please remove it completely.

    Best regards,
    Ismael

    #847964

    So for some reason I thought I had already removed that block of code but I guess not. 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.

    #848441

    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.

    #848623

    Hi metrocitygirl,

    So does this solve your issue or do you still need help with something?

    Best regards,
    Victoria

    #848720

    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.

    #848938

    Hi,

    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.

    That code is also messing up with the alignment of the containers because the container “template-page” is also use in the color sections. Where did you get that code? Please provide a link to the previous thread so that we can provide a better one.

    Best regards,
    Ismael

    #848955
    #849470

    Hi,

    Please remove the css modification then replace it with the following.

    
    @media only screen and (min-width: 768px) {
       #header {
            padding-bottom: 100px;
       }
    }

    Best regards,
    Ismael

    #849658

    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.

    #849839

    Hi,

    We re-ordered and cleaned the css modifications in the Quick CSS field. Please note that you don’t have to use multiple css media queries if it’s pertaining to the same viewport. We combined the css media query with the viewport set to (max-width: 767px) This is how the site looks on mobile.

    // https://imgur.com/a/AKJCN

    For the “budget” section, you should extract the text from the background image and add it as a builder element. Use a text block or special heading element.

    Best regards,
    Ismael

    #849851

    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.

    #849852

    Thanks for doing that. I understand more now :)

    #850240

    Hi,
    Shall we close this then?

    Best regards,
    Mike

    #850603

    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.

    #850852

    Hi,

    well I still can’t get the meal pickup location header text and line underneath to center.

    Add this css code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
      .hr-custom.hr-icon-yes .hr-inner {
          margin-left: 10px;
          margin-right: 10px;
          width: 50px !important;
      }
    }

    The separator are not centered because the width has been specified.

    He said he cleaned up my code but that still isn’t working.

    Yes, I did. Did you notice any difference?

    Best regards,
    Ismael

    #851701

    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.

    #851734

    Hi,

    Have you figured it out already by using following code?

    @media only screen and (min-width: 480px){
    #header {
        padding-bottom: 50px;
    }}

    If not, please use that code to increase the padding

    Best regards,
    Yigit

    #853909

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

    #854201

    Hi,

    The css code is working. The padding below the header is 50px. Increase it as you wish.

    Best regards,
    Ismael

    #854203

    Thats not what I am seeing on my end. screenshot mobile

    #854239

    Hi,

    It’s going to be applied if the screen size is more than 480px because of the css media query. Please look for this code.

    @media only screen and (min-width: 480px){
    #header {
        padding-bottom: 50px;
    }}

    Remove the css media query or replace it with:

    #header {
        padding-bottom: 50px;
    }

    Don’t forget to remove browser/plugin cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #854551

    Yep it worked thanks you can close this thread now!

    #854800

    Hi,

    Alright. Let us know if you need anything else.

    Best regards,
    Ismael

Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘Getting Things Aligned on Mobile’ is closed to new replies.