Home Forums Themes Support Formota Mobile Responsiveness

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #8224
    julynovember
    Supported

    Hi,
    How can I adjust the following so that it resizes correctly on mobile:

    1. Parallax image on Homepage cuts 2 of the guys off, I want more of image showing (please see screenshot)

    2. Gap/large space between the paragraphs on the About page (please see screenshot)

    3. Embedded music widget on the Music page cuts off (please see screenshot)

    Please advise, thanks!

    Attachments:
    You must be logged in to view attached files.
    #8227

    Hi,
    Thanks for choosing our product!
    1. You need add custom Class for Row like this:
    https://prnt.sc/xn7lyg
    then add this custom CSS in Appearance -> Customize -> Additional CSS:

    @media screen and (max-width: 767px) {
    	.bruh-section.vc_parallax .vc_parallax-inner {
    	background-position: top right 22%;
    }
    }

    The result: https://prnt.sc/xn8f4n
    2. You added empty space and it cause the issue:
    https://prnt.sc/xn8j4u
    Please add class hidden-xs to hide it on mobile
    https://prnt.sc/xn8lkk
    Please don’t use these elements to make spacing you can use padding or margin by percent.
    3. About Embed music now we don’t see it. (please enable it then we’ll check it later) Also please check the next custom yourself because we can’t check all custom from customers.
    We’ll check if our theme have bugs or errors,…

    ****
    Regards,
    HaruTheme

    #8237
    julynovember
    Supported

    Hi,
    1. Thanks so much! Looks great.

    2. I added the hidden-xs but there was still a gap appearing. I deleted and tried to adjust the padding instead but having same issue. Please see screenshot 2 where it says 2B. I added the same text to another section above (see 2A in screenshot) but this time I just used one column and it looks correct on mobile. Is there a way to still have my 2 columns on desktop and then 1 column without the gap on mobile?

    screenshot 2:
    https://drive.google.com/file/d/1e813oMsS68oC8oeEfm58fTtVD5JmYkLY/view?usp=sharing

    3. Music page. Please see screenshot. How can it resize on mobile to fit to screen correctly without cutting off half of the album cover?

    screenshot 3:
    https://drive.google.com/file/d/11GWv-fyb571fjuf-I7JR1PmLpFI0ib0r/view?usp=sharing

    I appreciate your help!

    • This reply was modified 2 months, 3 weeks ago by julynovember.
    #8240

    Hi,
    Please read our reply carefully.
    2. You should use percent in this case (not use pixel)
    However in your case can add this more:

    @media screen and (max-width: 767px) {
    .vc_custom_1611707170290 {
    padding-top: 0!important;
    }
    .vc_custom_1611707815865 {
    padding-top: 0!important;
    margin-bottom: 15px!important;
    }
    }

    3. You need to add this CSS code:

    iframe {
    	max-width: 100%!important;
    }

    However it’s not enough because the iframe you embed is not responsive here:
    https://prnt.sc/xojhta
    You need set width is 100% before embed.
    CSS can’t change it in this case.
    Hope this helps!

    ****
    Regards,
    HaruTheme

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.