Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #443041

    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

    #443241

    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

    #443402

    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

    #443404
    This reply has been marked as private.
    #444376

    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

    #444544

    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

    #445136

    Hi!

    Sorry, use this instead.

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

    Regards,
    Elliott

    #445254

    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

    #446392

    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

    #446433

    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

    #447825

    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

    #447838

    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

    #447906

    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

    #447931

    Sorry, my fault.

    But it does not work either.

    Still moving to the left when making screen smaller.

    Regards, Simon

    #448079

    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

    #448217

    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 8 years, 10 months ago by simonac.
    #449391

    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

    #449497

    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

    #449847

    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 8 years, 10 months ago by Rikard. Reason: Customer requested to remove link
    #449882

    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

    #449921

    Hi!

    Great. I removed the link from Ismaels post.

    Best regards,
    Rikard

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