Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 1, 2015 at 2:05 pm #545154
    charlotteraboff

    Hi,

    How can I put a widget, in this case the Booking widget on top of full width image?
    http://www.airlinestaffrates.com

    I want to have something like this: http://www.id90travel.com
    Where the widget is in the center.

    Thanks
    Charlotte

    December 1, 2015 at 2:18 pm #545166
    Yigit

    Hi Charlotte!

    Please add color section element to your page and place your widget area element inside it :)

    Best regards,
    Yigit

    December 1, 2015 at 2:26 pm #545176
    charlotteraboff

    :-)

    http://www.airlinestaffrates.com/testing/
    How can I adjust the width of the image and the text block?
    I want it to be in the center but maybe around 500px wide.

    December 1, 2015 at 2:31 pm #545182
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .page-id-17507 #av_section_1 {
    background-size: 500px 100%;
}

    If that is not what you wanted, please post a screenshot and show the changes you would like to make

    Regards,
    Yigit

    December 1, 2015 at 2:34 pm #545187
    charlotteraboff

    No i meant the widget and the text block – now the image became smaller..
    but the text block is ok, so I want the widget to be in the center and same width as the text block.

    Thanks.

    December 1, 2015 at 2:37 pm #545193
    Yigit

    Hi!

    Please replace the code with following one 

    #bos_searchbox_widget_class-2 {
    max-width: 500px;
    margin: auto;
}

    If that is still not what you would like, please post a screenshot so we can understand better :)

    Cheers!
    Yigit

    December 1, 2015 at 2:50 pm #545209
    charlotteraboff

    Perfect!

    Just one more question.
    As it is now there is no background color on the text block.
    I would like to add a transparent white background.

    What code shall I add?

    Thanks
    Charlotte

    December 1, 2015 at 2:55 pm #545211
    Yigit

    Hi!

    Please turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ (if already turned on, skip this step) and then give your text block element a custom CSS class and then add following code to Quick CSS 

    .your-custom-class { background: rgba(255,255,255,0.5) !important; padding: 10px; }

    Cheers!
    Yigit

    December 1, 2015 at 3:18 pm #545254
    charlotteraboff

    Great, thanks.

    But when I added the code the text block became wider.

    Will the settings be the same if I build this on another page? Of course by adding also the your-custom-class name I created.

    December 1, 2015 at 3:23 pm #545259
    Yigit

    Hey!

    1- Please change your code to following one 

    .eligibility {
    background: rgba(255,255,255,0.5) !important;
    padding: 10px;
    max-width: 500px;
    margin: auto;
}

    2- Yes :)

    Cheers!
    Yigit

    December 1, 2015 at 3:29 pm #545265
    charlotteraboff

    Great, thanks :)

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Widget on top of full width image’ is closed to new replies.