Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1127231

    Hi support,

    How do I make a 3/5 container/column float in the top/left of the first color section?

    I have giving the container/column this name in Custom Css Class: forvirksomhederbox
    The container/column is placed in the top color section as the only container.

    I have been trying with this code:

    .forvirksomhederbox .flex_column.av_three_fifth.flex_column_div.av-zero-column-padding.first.avia-builder-el-1. (Purchase code hidden if logged out) {
    float: left !important;
    position: relative !important;
    top: 25% !important;
    left: 25% !important;
    transform: translate(-25%, -50%) !important;
    }

    The test site/page is located here: http://web19.lexodoc.dk/for-virksomheder/

    Thanks :-)

    /OKEIwebbureau

    #1127346

    Hey OKEIwebbureau,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1127525

    Here is the mockup:

    http://web19.lexodoc.dk/wp-content/uploads/2019/08/forvirksomheder-mockup.jpg

    I want the content of the container/column to float in the top/left corner.

    Thanks :-)

    /OKEIwebbureau

    #1127532

    is ti your page: virksomhed – you found a solution though?

    Why are you using a different slider? the fullwidth easy slider of enfold got all you need
    a Caption with subheading and the possibility to have one or two buttons. This will react responsive too !

    https://webers-testseite.de/lexoforms/

    and you can have overlay color aswell.

    #1127592

    Hi Guenni007,

    Great idea with the easy slider – I will give it a try :-)
    How did you get the caption container placed at the top in the left side?

    However I would also like, if possible, a solution without the fullwidth easy slider.

    Thanks :-)

    /OKEIwebbureau

    #1127700

    you can do it via quick css f.e. to overwrite the vertical align : middle instruction

    .page-id-35534 .slideshow_align_caption {
        vertical-align: top;
        top: 5vw;
    }

    on responsive case i go away from 100% container for caption and set it to:

    .responsive #top.page-id-35534 .slideshow_caption {
        width: 60%;
    }

    ( i did it only for that page )

    #1127717

    Thank you very much, Guenni007 :-)

    /OKEIwebbureau

    #1127718

    @supportteam: Still I would also like, if possible, a solution without the fullwidth easy slider.

    Thanks :-)

    /OKEIwebbureau

    #1127726

    just one moment – i did’t saw the test link in your starting thread.

    To have a responsive Color-Section – you have to have a responsive Content ! – otherwise it will go out of the container.
    Your bg-image is 1600/768 so an aspect ration of 48%

    so you have to set your background-image to “contain” the image – but the height of the color-section should be 48% of width:
    in responsive Case the 3/5th container should stay in this width or should be adjusted to your needs – enfold goes to have the containers under each other at a responsive width so to speek on 100% width:

    see here the test page: https://webers-testseite.de/responsive-color-section/

    .page-id-35548 #av_section_1 {
      width: 100vw;
      height: 48vw !important;
    }
    
    .page-id-35548 .flex_column.av_three_fifth {
      width: 58vw !important;
    }
    
    .page-id-35548 .flex_column.av_three_fifth .av-special-heading h1 {
      font-size: 4vw !important;
      line-height: 6vw !important;
    }
    
    .page-id-35548 .flex_column.av_three_fifth .av-special-heading .av-subheading {
      font-size: 3vw !important;
      line-height: 4vw !important;
    }
    
    .page-id-35548 .avia-button .avia_iconbox_title {
        font-size: 2.5vw !important;
    }
    
    .page-id-35548 .flex_column.av_three_fifth .av-special-heading h1 {
    	font-size: 3.2vw !important;
    	line-height: 5vw !important;
    }
    .page-id-35548 .flex_column.av_three_fifth .av-special-heading .av-subheading {
    	font-size: 2vw !important;
    }
    #1127728

    Please take a look at this screenshot from the controlpanel:
    http://web19.lexodoc.dk/wp-content/uploads/2019/08/Enfold-Page-ID-37.png

    Thanks Guenni007 :-)

    /OKEIwebbureau

    #1127764

    the thing is not that the 3/5 container does not what you like to have the point is that the background-image and the container does not do what you intend to have.
    The above gives you the possibility to have a responsive Color-section – but you have to make adjustments to have content that fits into the smaller section

    so my recommendation : use the fullwidth easy slider – it starts from the beginning with responsiveness. – and even the content is prepared for that.

    you don’t need to find a relative font-size like the code above does with screen width relation – each slide got his own screen behavior to adjust for smaller screens :
    (Purchase code hidden if logged out) -07-46-12.jpg”>(Purchase code hidden if logged out) -07-46-12.jpg” alt=”” />

    #1128335

    Hi,

    Let us know if this is helpful and enough for you

    Best regards,
    Basilis

    #1128846

    Hi Basilis,

    Please give me a solution for this (also posted earlier..):

    http://web19.lexodoc.dk/wp-content/uploads/2019/08/forvirksomheder-mockup.jpg

    I want the “.flex_column.av_three_fifth” in “#av_section_1” to float in the top/left corner.
    Margin-top: 15%.
    Margin-left: 15%.

    Thanks :-)

    /OKEIwebbureau

    #1129153

    I found a solution that nearly did it:

    .page-id-37 #av_section_1 .flex_column.av_three_fifth {
    position: relative !important;
    top: 25% !important;
    left: 10% !important;
    transform: translate(-25%, -50%) !important;
    }

    It works pretty good on desktops and tablets, but not on mobile.

    /OKEIwebbureau

    #1129830

    Hi,

    Thank you for the update. Glad that you’ve found a solution.

    Try to wrap it inside a css media query so that it doesn’t affect the mobile view.

    @media only screen and (min-width: 989px) {
      /* Add your Desktop Styles here */
      .page-id-37 #av_section_1 .flex_column.av_three_fifth {
        position: relative !important;
        top: 25% !important;
        left: 10% !important;
        transform: translate(-25%, -50%) !important;
      }
    }

    Best regards,
    Ismael

    #1129884

    Good idea, thanks :-)

    Please close.

    /OKEIwebbureau

    #1129926

    Hi OKEIwebbureau,

    Glad we could help :)

    Closing this one.
    Best regards,
    Victoria

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘How do I make a 3/5 container/column float in the top/left?’ is closed to new replies.