Yigit

That’s brilliant, thanks so much. A couple of things though. Is is possible to bring the banner down half a centimetre or so? It just looks to near the top of the page now and not “centred”. Can we remove the line below it also? Also the menu is a bit messed up. When I highlight a menu item the line goes through the menu item. Ideally I would like it again about half a centimetre below the image and the highlight bit to go under the word. I think I may have a bit of superfluous CSS in there so feel free to remove anything that isn’t necessary :)

Thanks so much for your help.

Regards
Rob

Hi

1. I already bought the plugin
2. I saw in many of your support answer for other users telling them to add some scripts etc. like here
https://kriesi.at/support/topic/adding-whatsapp-button-on-social-share-buttons/
and the result is this http://eventsquared.london/uncategorized/test/

Thats excatly what im looking for just need ome guidance no how to, soi you were giving code for others its because ts possible

Thank you

Hi Andy,

I applied the code to the Quick CSS, but there is already code there. I applied the most recent code into the same box seeing as there is only one, so the Quick CSS box is filed as follows (see below), but no changes were made as a result. In other words, the text was not centered, the slider on the website still has the text awkwardly aligned to the top. Can you please tell me what to do next?

@media screen and (max-width: 767px) {
.ls-slide h3 { font-size: 9px !important; }
}

.menu li > a:after { content: ‘ ▾’; }
.menu li > a:only-child:after { content: ”; }

@media only screen and (max-width: 767px) {
.layer-textbox {
padding-top: 20px;
}
}

#mc_embed_signup .clear {
display: block;
visibility: visible;
height: auto;
width: auto;
}

.blog span.post-meta-infos * {
display: none;
}
.blog span.post-meta-infos time{
display: block;
}

.page-id-27.post-meta-infos {
display: none;
}

Hi Ismael,

thank you for the workaround, I’m going to try.
Anyway the video is on our homepage and I would prefer a working color section with videos and slides in IE9.
Enfold supports Video Slides so it should work, right? Please report this issue to Kriesi and keep me up-to-date.

Thank you
Cornelia

10/03/16
Hi Ismael,
any news from Kriesi to this topic?
Thank you
Cornelia

• This reply was modified 10 years ago by HRworks.

I think the banner is fine now. However, still need to have the very top area consistent with Home page.

Also, is there a way to get the menu to shift into mobile view when viewing on ipad?

See here: http://obmwatersports.com/image1-2/

Hi Yigit,

Thank you so much for helping me. This isn’t working. I think I may have an error in my CSS somewhere. You can take a look if you like. ALSO, I tried to move ALL CSS from quick CSS to Editor > style.css so I could have more room to work. Once I moved the CSS from Quick CSS to style.css, none of the CSS worked at all. So, I put it all back.

1. Do you know why no CSS is applied when deleting from Quick CSS to moving to style.css?

2. I attempted to change the values and it has no effect on my iPhone 6s Plus. The center icons are way to the right off-center. (see screenshot). I tried !important.

3. It looks perfect on an Android HTC ONE, iPhone 5s and iPhone 4s but looks not good on an iPhone 6. I had to edit the values a few pixels in a couple of locations.

4. This is ALL the CSS I have so far. We are almost there. This will be good so I can use it on my other sites!

/*mobile - icon - color section content*/

@media only screen and (max-width: 767px) {
#top #wrap_all #photo-center .flex_column.av_one_third {
    width: 31%;
    height: 485px!important;
    float: left;
    clear: none;
    margin-left: 1%;
}} /*content element: icon*/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) { 
a.av-icon-char {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
}} /*icon content element size*/

@media only screen and (max-width: 767px) {
#photo-center .av-parallax .av-parallax-inner {
    background-position: 50% 50% !important;
    height: 165px !important;
}} /*move background image*/

@media only screen and (max-width: 767px) {
.avia-section {
height: 165px;
}} /*adjust color section size*/

@media only screen and (max-width: 767px) {
span.av_font_icon.avia_animate_when_visible.av-icon-style-border.av-no-color.avia-icon-pos-center.avia_start_animation.avia_start_delayed_animation {
position: relative;
top: -40px;
}} /*icon element position height*/

@media only screen and (max-width: 480px) {
#photo-center a.av-icon-char {
    width: 15px!important;
    height: 15px!important;
    line-height: 13px!important;
} /*center icon position in icon element*/

#photo-center a.av-icon-char:before {
    left: -12px;
    position: relative;
}

#photo-center .av_icon_caption {
    font-size: 13px;
}}

@media only screen and (max-width: 580px) and (min-width: 481px) {
#photo-center a.av-icon-char:before {
    left: -2px;
    position: relative;
}}

• This reply was modified 10 years ago by Jasmer. Reason: Updated Screenshots