Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #412490

    Hello.
    I have a few responsive problems on iPad and iPhone:

    On Link 1: i had made a 2/5 | 1/5 | 2/5 column. In the 1/5 column i added a piconbox, and the text will cut on the border. Its only on iPad

    On Link 2: i added four 1/4 columns for animated numbers. i Customize with CSS Code to get a circle border arround the Numbers.
    On iPad and iPhone it is not in center, it´s allways left

    On Link3: i added a color section and a partnerlogo slider. On iPad it allways stays left. I think it can be show 4 in one row.

    On Link 4: i added a Fullscreenslider. On Desktop it looks well, but on iPad and iPhone the Navigationarrows overlaps the content, and on iPhone, the slider is to big in height, it shows no scrolldown arrow and cuts the content/button.

    Can u help me please, to fix this problems ?
    Regards Manuel

    • This topic was modified 9 years, 8 months ago by Dandy.
    #413209

    Hey Manuel!

    1. There just isn’t enough space there for that long word. If you add a space or a hyphen in the middle of the word then it should break to the next line. I think that is the only way to force it to break. Or you could try reducing the font size or the column size to make it fit.

    2. If your wanting to force them to 4 columns then add this to your custom CSS.

    #kreis-icon .flex_column {
      clear: none !important;
      float: left !important;
      margin: 10px !important;
      width: 22% !important;
    }

    3. Drag a codeblock element to your page and add this inside.

    <style type = "text/css">
    #top .no_margin.av_one_fourth {
      clear: none !important;
      float: left !important;
      width: 24% !important;
    }
    </style>

    4. Add this to your custom CSS.

    .responsive #top .slideshow_caption .avia-caption-content { width: 50% !important; }
    

    Regards,
    Elliott

    #413509

    Hey, thx for your answer

    1. Solved, i take a other column :-)

    2. When i do this, it looks demage:

    i would have the same as on http://kriesi.at/about on ipad zwo circles in one row and halign center, on iphone one circle in row and halign center.

    3. This works on iPad, it tooks all 4 logos in one row. but make the logo smaller. Is it possible that i can get the normal screen in responsive that 2 in one row, but center in the middle? It is allways align left on iPad. On iPhone all is ok.

    4. solved

    PS: After upgrading to 3.1 i have no scroll up button at the end of the site on iphone. In iPad it shows.

    • This reply was modified 9 years, 8 months ago by Dandy.
    #414618

    Hey!

    2. Well as you can see there just isn’t enough space on a smartphone screen to fit them all on one line. If it was me I would just let them span to 100% width like they were doing before on smaller screens. If you want to do that then remove the previous code I gave you and add this instead.

    #kreis-icon .flex_column {
      text-align: center;
    }

    3. Try this instead.

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    #top .no_margin.av_one_fourth {
      clear: none;
      float: left;
      width: 24%;
    }
    }

    You may have to play around with the 480 and 767 values to get it to target that exact area on your ipad your trying to change.

    Best regards,
    Elliott

    #414682

    Hello,

    thx all works now :-)

    Can you say me please, how i get back my Scroll Up button on iPhone? On Desktop and iPad i see it, but not on iPhone.

    #415403

    Hey!

    Try adding this to your custom CSS.

    .responsive #scroll-top-link {
      display: block !important;
    }

    Best regards,
    Elliott

    #415427

    Hello,

    i will try this.

    Can you pease say me, how can i hide the tilte in masonry gallery only on responsive.
    On desktop it shows only on hover over the photo, but on responsive it shows every time.

    #415701

    Hi!

    The hover state isn’t going to work on mobile view that’s why they are displayed by default. Add this to the Quick CSS field to hide it permanently on mobile:

    @media only screen and (max-width: 767px) {
    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
     display: none !important;
    }}

    Cheers!
    Ismael

    #415933

    Hello Ismael,

    thx for your answer.

    i have change it to

    .responsive .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
     display: none !important;
    }

    that it work also on landscape mode on ipad.

    But i have problem with the Scroll to top button on iPhone.
    I know on iPad it is possible to tab with finger on iPhone Statusbar to scroll up to the begin.
    But not all user do know that. So i want this scroll to top button back.
    I tested the code from Elliot, but this does not work. The Button does not show.

    I think this has only to do with iPhone not generally with the responsive on other devices.

    Regards Manuel

    • This reply was modified 9 years, 7 months ago by Dandy.
    #416546

    Hi!

    Try this instead.

    #scroll-top-link {
      display: block !important;
    }

    Cheers!
    Elliott

    #416994

    Hello Elliott,
    this works, thx for help.

    #417274

    Hello again.

    I updated to 3.1.2 and now the scroll to top button does not show anymore :-(
    Elliott is there a new way to get it back ?

    #417881

    Hey!

    The CSS should be working. Did you add it to the theme stylesheets? If so then they will be overwritten when you update.

    Add the code in Dashboard > Enfold > General Styling > Quick CSS or use a child theme, http://kriesi.at/documentation/enfold/downloads/.

    Best regards,
    Elliott

    #417937

    Hello,

    I use Enfold Child theme, and i use this code.

    #scroll-top-link {
      display: block !important;
    }

    On iPhone i do not see the Scroll top button.

    #417941

    Hi!

    Please add following code to Quick CSS

    @media only screen and (max-width: 767px) {
    .responsive #scroll-top-link {
      display: block!important;
    }}

    and make sure to disable CSS minifying feature and flush cache

    Cheers!
    Yigit

    #418001

    Hello Yigit,

    this does not work on iPhone. I had tested without Cache plugin activated.

    #418003

    Hey!

    Code is not being applied. Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Cheers!
    Yigit

    #418079

    Hello Yigit,

    big thx for your support.
    All problems now fixed :-)
    Topic can be closed.

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Little Responsive problems’ is closed to new replies.