Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 16, 2015 at 7:47 pm #412490
    Dandy

    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, 9 months ago by Dandy.
    March 17, 2015 at 8:44 pm #413209
    Elliott

    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

    March 18, 2015 at 11:03 am #413509
    Dandy

    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, 9 months ago by Dandy.
    March 19, 2015 at 4:55 pm #414618
    Elliott

    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

    March 19, 2015 at 5:49 pm #414682
    Dandy

    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.

    March 20, 2015 at 5:10 pm #415403
    Elliott

    Hey!

    Try adding this to your custom CSS.

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

    Best regards,
    Elliott

    March 20, 2015 at 5:42 pm #415427
    Dandy

    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.

    March 21, 2015 at 11:13 am #415701
    Ismael

    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

    March 22, 2015 at 11:38 am #415933
    Dandy

    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, 9 months ago by Dandy.
    March 23, 2015 at 6:21 pm #416546
    Elliott

    Hi!

    Try this instead.

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

    Cheers!
    Elliott

    March 24, 2015 at 11:29 am #416994
    Dandy

    Hello Elliott,
    this works, thx for help.

    March 24, 2015 at 6:32 pm #417274
    Dandy

    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 ?

    March 25, 2015 at 4:38 pm #417881
    Elliott

    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

    March 25, 2015 at 5:17 pm #417937
    Dandy

    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.

    March 25, 2015 at 5:19 pm #417941
    Yigit

    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

    March 25, 2015 at 5:52 pm #418001
    Dandy

    Hello Yigit,

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

    March 25, 2015 at 5:55 pm #418003
    Yigit

    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

    March 25, 2015 at 6:54 pm #418079
    Dandy

    Hello Yigit,

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

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