Little problem on tablet screen. Not responsive

  • Resolved nffox

    (@nffox)


    4 years, 5 months ago

    Hello, dear CoBlocks team.
    I am trying to embed a Zoho form on a website, using <iframe>, and it looks very nice on mobile and desktop, but not on tablet, please see the attached image. It sticks to right.
    https://armadaled.org/wp-content/uploads/2020/10/zoho_form.png

    Really appreciate any help, I am just starting understand coding ??

    Here is the Zoho Form iframe:
    <iframe style="height:1500px;width:100%;border:none;" src="https://forms.zohopublic.com/ArmadaLED/form/ProductEnquiry/formperma/XXXXXXXX" scrolling="no" frameborder="0"></iframe>

    Here is the page:
    https://armadaled.org/luminarias_bombillas_reflectores_rd/

    I was told by Zoho, that we need to look into this part of code:
    https://armadaled.org/wp-content/uploads/2020/10/Current.png

    @media (min-width:600px) and (max-width:781px) {
 .wp-block-column {
  flex-basis:calc(50% - 16px)!important;
  flex-grow:0
 }
 .wp-block-column:nth-child(2n) {
  margin-left:32px
 }

    Changing it to:
    https://armadaled.org/wp-content/uploads/2020/10/New.png

    flex-basis:calc(93% - 16px)!important;

    So, could you please help me to find a CSS code, that need to be added via customization dashboard please?

    Apparently this one (and 10+ more combinations) doesn’t work for me↓↓↓

    .page-id-6711 @media (max-width:781px) {
 .wp-block-column {
  flex-basis:calc(93% - 16px)!important;
  flex-grow:0
 }
}

    And am I right, their screenshots also hint that also “margin-left” should be depressed? As the there is no check mark there…?

    Thanks a lot!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter nffox

    (@nffox)

    I just managed to solve the problem. “Nearly”.

    Put a row > added carousel > grouped and added second row, where the custom html was inserted. The form is good, responsive on desktop/tablet/mobile, BUT: the carousel slider (seems to me depending on the Zoho form) is cropped, so it shows about 70% of slide, and the company logos are cropped… Any idea how can I overcome this issue? Thanks.

    https://armadaled.org/wp-content/uploads/2020/10/Screenshot_20201006-061711_Chrome.jpg

    https://armadaled.org/wp-content/uploads/2020/10/Screenshot_20201006-061713_Chrome.jpg

    • This reply was modified 4 years, 5 months ago by nffox. Reason: forgot add screenshots
    Plugin Support Aleksandar

    (@gdalex)

    Hey @nffox,

    Thanks for reaching out!

    I’m so glad to hear that you were able to solve this issue on your own!

    Regarding the logos being cropped, could you try adding this code to the Additional CSS area?

    
#post-6711 > div.entry-content.clearfix > div.wp-block-coblocks-gallery-carousel > div > div{
 height:150px !important;
}

    It seems like this area has a fixed height of 95 pixels, which is causing the logos to be cropped. This code overrides that CSS rule.

    Please let me know if this works for you.

    Thread Starter nffox

    (@nffox)

    Well… I just changed the logo image, made them a little bit smaller.
    And also applied this settings:

    PERFECT SETTINGS
    FULL WIDTH
    Size: S

    Gutter: HZ, auto, no value
    Height: 90

    Slider setting:
    Slide speed: 2 sec
    Draggable
    Align cells

    Carousel
    Extra Large
    Height 90

    SLIDER settings
    Autoplay: 2 sec
    Uncheck: Arrow Navigation

    Advanced:
    EVERYTHING UNCHECKED

    But let me check your code, thank you very much. I notices that ANY changes (if not 90 pixels height) and it crops the image from both sides (left/right).

    And anyway it appears “blurry” on desktop…

    Thread Starter nffox

    (@nffox)

    Not sure, but probably it should be something like this?

    .page-id-6711 > div.entry-content.clearfix > div.wp-block-coblocks-gallery-carousel > div > div{
 height:150px !important;
}

    And it does nothing ;(

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Little problem on tablet screen. Not responsive’ is closed to new replies.