Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • May 12, 2015 at 3:10 pm #443041
    simonac

    Hi i have some problems with some elements on mobile view.

    1.
    I made some color sections or grid elements 0.8 transparent with this code:
    #id{ background-color: rgba(255,255,255,0.9); }
    on mobile (android) these color sections transparency does not work. The bg is just grey there.

    2.
    In a color section i have an bg image and a i divided the section into 1/2 and 1/2 in the second layout element i put a text ( special heading). This element moves to the left as soon as the screen is getting smaller. How can i avoid this? ( Because it to a place where it looks not good.) The element should stay right.

    Regards Simon

    May 12, 2015 at 6:17 pm #443241
    Elliott

    Hey simonac!

    It looks fine on my end. What device are you using? Can you take a screenshot?

    If your using an Android device then make sure you download the official Chrome browser if it’s not already installed.

    Regards,
    Elliott

    May 12, 2015 at 10:19 pm #443402
    simonac

    I now tested chrome mobile and the transparent section is working there. But it should work on other browsers aswell right?
    Here’s asc how it looks like.

    How to fix that?

    The other problem is still there.

    REgards

    May 12, 2015 at 10:20 pm #443404
    simonac
    This reply has been marked as private.
    May 14, 2015 at 4:30 pm #444376
    Elliott

    Hey!

    Older mobile browsers are not as up to date as modern browsers so it’s really hard to support and troubleshoot them. It would be best to use the official Chrome browser.

    For the other problem try adding a codeblock element to the page and add this inside.

    body .av-special-heading.blockquote > * { float: right !important; }

    Regards,
    Elliott

    May 14, 2015 at 7:19 pm #444544
    simonac

    So, i added the codeblock element at the end of the page. Put this exact code inside but nothing happened. Just the code was at the end of the page.

    Do i have to check something in the codeblock element or add something to the code? Add a custom css class?

    Regards
    Simon

    May 15, 2015 at 8:08 pm #445136
    Elliott

    Hi!

    Sorry, use this instead.

    <style type = "text/css">
body .av-special-heading.blockquote > * { float: right !important; }
</style>

    Regards,
    Elliott

    May 16, 2015 at 10:21 am #445254
    simonac

    The code works…
    but the text is now on the right end. Is it possible to make it stay at the exact position where it is now? Or to determine a specific position?

    I also tried “center” instead of “right” but this did not work.

    Regards Simon

    May 19, 2015 at 1:22 pm #446392
    Andy

    Hi!

    you are talking about this text, which is hiding the portrait image, right?

    If yes use this code in Quick CSS field to control the position of the text:

    h3.av-special-heading-tag {
position: relative;
left: 68px;
}

    and adjust as needed.

    Cheers!
    Andy

    May 19, 2015 at 2:41 pm #446433
    simonac

    Yes, thats what i mean. But it does not work
    And when i use your code all h3 special headings move

    I used this code instead

    .customcccclass {
position: relative;
left: 0px;

    …but the same here.. When i make the screen smaller it moves to the left side.

    Regads Simon

    May 21, 2015 at 4:48 pm #447825
    Andy

    Hey!

    in this case you would need to activate custom class fields: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    After activating it in “Custom CSS Class” field put for example “gefuehle-title” without quotation marks. Then use something like this to control it on mobile devices: 

    @media only screen and (max-device-width: 736px) {
#top .gefuehle-title {
position: relative;
left: 68px;
}}

    Hope this helps.

    Best regards,
    Andy

    May 21, 2015 at 5:00 pm #447838
    simonac

    Sorry, but this does not work.

    I have a section id for this color section which is “sec_karten”

    Do i have to adapt the #top in some way?

    Regards Simon

    May 21, 2015 at 6:18 pm #447906
    Andy

    Hey!

    it’s not about the color section, it’s about to add a Custom CSS Class for your special heading. So after activating Custom CSS Class for all ALB elements go and edit your special heading you want to customize and put for example “gefuehle-title” into the Custom CSS Class field.

    Cheers!
    Andy

    May 21, 2015 at 7:07 pm #447931
    simonac

    Sorry, my fault.

    But it does not work either.

    Still moving to the left when making screen smaller.

    Regards, Simon

    May 21, 2015 at 11:06 pm #448079
    Andy

    Hi!

    it does not seem that you did add a Custom CSS Class to the special heading in question:

    Here you see that it still says “h3.av-special-heading-tag” instead of for example “gefuehle-title”. So please follow the steps explained here correctly.
    By the way I tried to login to check it in your backend, but we need admin access, instead of a default access.

    Regards,
    Andy

    May 22, 2015 at 8:25 am #448217
    simonac

    Hi Andy, thats strange because i did add the custom css class.

    View post on imgur.com

    The login is an admin now again.

    Regards,

    Simon

    • This reply was modified 9 years, 6 months ago by simonac.
    May 25, 2015 at 6:40 am #449391
    Ismael

    Hi!

    After you add the custom css class attribute, you need to use it in the Quick CSS field in order to modify the current element. Use this:

    .gefuehle-title h3 {
  text-align: right;
}

    Best regards,
    Ismael

    May 25, 2015 at 1:34 pm #449497
    simonac

    Thats what i did.
    The text-align: right; is not what it should be.

    I also tried this without success:

    @media only screen and (max-device-width: 736px) {
.gefuehle-title h3 {
position: relative;
left: 68px;
}}

    also without the `@media only screen and (max-device-width: 736px)

    Regards, Simon

    May 26, 2015 at 7:37 am #449847
    Ismael

    Hey!

    Alright. Please check it now.

    You need to clean your css codes. Media queries should be declared once and they usually go at the very bottom of the stylesheet.

    @media only screen and (max-width: 768px) {
/* Add your Mobile Styles here */
}

@media only screen and (max-width: 480px) {
/* Add your Mobile Styles here */
}

    Cheers!
    Ismael

    • This reply was modified 9 years, 5 months ago by Rikard. Reason: Customer requested to remove link
    May 26, 2015 at 8:51 am #449882
    simonac

    Allright, thanks Ismael.

    So the correct code finally is this one:

    .gefuehle-title h3 {
position: relative;
right: 68px;
text-align: right;
}}

    Thanks!

    PS. Could you please remove the link to the hp in your post.

    Regards Simon

    May 26, 2015 at 9:54 am #449921
    Rikard

    Hi!

    Great. I removed the link from Ismaels post.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.