Home Forums Community Forum Mobile responsive

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • Rickulous
    Participant
    Post count: 3

    Hello others,

    I am making a website and i have a header photo and two other full width photos. When i go on my mobile the header photo is good, but the two others are not scaling with the mobile version. I made in the photos a some kind of arrow that is a bit blurry or white, so you can read the texts good. The problem then is that my contact form and an other text is not at the right position but full in the photo. How can i fix this?

    Or maybe a better question, how can i make my website mobile responsive in the most easy way without paying for a plugin?

    An other problem is that my header photo is correct at my mobile, but the header text stays the same and is far too big on the mobile… how can i fix all of this?

    Greetnings, Rick

    Rickulous
    Participant
    Post count: 3
    marklchaves
    Participant
    Post count: 141

    Hello,

    I’m like you. Try to avoid plugins as much as possible. The more plugins you have, the slower you site will be and more time it will take to maintain (updates/testing).

    Thanks for the link to your site. I assume you are referring to the contact form at the bottom of your home page. It looks like an envelop tilted on its side. I like the design.

    There are a couple ways to approach this. I’ll give you what I think is the most conservative.

    Right now, the left padding for the text box you have in that contact form is set to 100px. See screen capture.

    https://imgur.com/a/6B5J83s

    Pixel units are not responsive. Furthermore, I think you don’t need any left padding at all for all mobile devices (phones and tablets). Most designers will set these “gutters” to 0. I tested padding-left: 0 on phone and tablet viewports in portrait and landscape. It looks good to me. If your + icon for your left side vertical menu is in the way, maybe try 1% or 2%.

    Here’s the CSS I recommend (may not be exact because I’d need to test it in your code).

    First

    Add a class to the column (or text element–you may need to try both). Call it something like

    left-gutter

    Notice there is no leading period. You would add this using your Fusion Builder.

    Then, at the top of your Fusion Builder editor open the angle brackets </>, add this code.

    
    /* Clear the left gutter for tablets and smaller. */
    media only screen and (max-width: 1024px) {
      .left-gutter {
        padding-left: 0; /* No units needed for 0 values. */
      }
    }
    

    Notice there is a leading period for .left-gutter above. This leading period is needed here.

    Here is a great Avada doc on where to add the CSS if you’ve never done this before.

    https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

    Good luck!

    Rickulous
    Participant
    Post count: 3

    Hello Mark thanks for your awnser.

    I tried your thing but i dont see a big difference, only the 100px away is maybe good yes.

    But i have a few quiestions to you, i hope you can awnser them.

    When you see my homepage on mobile you can see that the title of the headader is far too big for the background. Is it smarter to not do this background on the mobile, but a different one? As you said i have on three background pictures a > because in that area is the text on the computer. I did this to show better where the text is and you can read it better. But as you see it doesnt work well on mobile devices. How can i make it work? Like do i need to make the texts smaller? but they still need to read it on the mobile without zooming in.

    My second question is about the second background photo with the blue things about the what we do. If i smaller my laptop window the picture stays ok, untill i make it to minimum width. Then the blue things are getting a lot bigger. Why does this happen to this one, and why not to the header? Same problem with the third photo doesnt size when the screen gets smaller and you dont see the whole photo.

    The third question is about the contact page and is a bit the same as my second one. The photo is not the correct size and the contract form is too big. Is it smarter to do an other photo? Or is it smarther to make different containers? That i make for that things two containters, one with the Container Visibility on large and medium, and one on small? Or is this gonna be too much things in one page and will ruin the loading time?

    My fourth question is about the padding of the page. Somehow it has a 30px padding at both sides but i really dont know why. I can nowhere find it back and no idea how i can get it away.

    My last question for now is about mobile responsive. How can i do this in an easy way? because as you see now all my content on the mobile is under each other and looks weird and too big. Now you see so many photos under each other and all looks weird. Is there a plugin or whatever for it? I found a few but then you need to pay at least 20 dollar.

    I hope you can help me and if you want to you can send me a message on instagram chat : Rickvdwijk. This is maybe a bit more easy and then we can chat about it instead of message here all the time.

    Thanks for your help!

Viewing 4 posts - 1 through 4 (of 4 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.