….actually the only change is that the mobile image is now at the top and the desktop one is below. So it just flipped these

Hi Ismael,

Just created desktop and mobile sections on both pages. All looks like I want so far except for when I flip the ipad horizontally. It does use the mobile version. What should I change in my CSS code that would force the landscape mode on my ipad to display like in portrait mode. I reduced my screen size from 1024px to 989px but it did not fix the issue.

Here’s my code:
/* alternate Releve entreprise grid for mobile devices */
@media screen and (max-width: 989px) {
#releve-entreprise-desktop { display: none !important; }
#releve-entreprise-mobile { display: block !important; }
}
@media screen and (min-width: 989px) {
#releve-entreprise-desktop { display: block !important; }
#releve-entreprise-mobile { display: none !important; }
}

/* alternate Releve leaders grid for mobile devices */
@media screen and (max-width: 989px) {
#releve-leaders-desktop { display: none !important; }
#releve-leaders-mobile { display: block !important; }
}
@media screen and (min-width: 989px) {
#releve-leaders-desktop { display: block !important; }
#releve-leaders-mobile { display: none !important; }
}

/* COACHING PAGE */
/* alternate Coaching travail grid for mobile devices */
@media screen and (max-width: 989px) {
#coaching-travail-desktop { display: none !important; }
#coaching-travail-mobile { display: block !important; }
}
@media screen and (min-width: 989px) {
#coaching-travail-desktop { display: block !important; }
#coaching-travail-mobile { display: none !important; }
}

/* alternate Coaching partenariat grid for mobile devices */
@media screen and (max-width: 989px) {
#coaching-partenariat-desktop { display: none !important; }
#coaching-partenariat-mobile { display: block !important; }
}
@media screen and (min-width: 989px) {
#coaching-partenariat-desktop { display: block !important; }
#coaching-partenariat-mobile { display: none !important; }
}

Thanks
Lyse

Thanks a lot dear Yigit for the detail.
Yes, we have an English version and Farsi (RTL language) version.

For instance, right now we have these codes under our general tab:

body { font-family: "IRANSans" !important; }
fieldset label { font-family: "IRANSans" !important;}
input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;}
input[type='text'],
input[type='email'],
textarea{ font-family: 'IRANSans' !important;}
#top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'!important;}

@media only screen and (max-width: 767px){
#header_meta .sub_menu {
    min-width: 560px;
    background: rgba(0, 0, 0, 0);
    padding-left: 0;
    padding-top: 0px;
    right: 30%;
    position: relative !important;
    top: 15px;
}
}

So, should I add them into the style.css with the below changes:

.rtl body { font-family: "IRANSans" !important; }
.rtl fieldset label { font-family: "IRANSans" !important;}
.rtl input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;}
.rtl input[type='text'],
.rtl input[type='email'],
.rtl textarea{ font-family: 'IRANSans' !important;}
.rtl #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'!important;}
.rtl @media only screen and (max-width: 767px){
#header_meta .sub_menu {
    min-width: 560px;
    background: rgba(0, 0, 0, 0);
    padding-left: 0;
    padding-top: 0px;
    right: 30%;
    position: relative !important;
    top: 15px;
}
}

• This reply was modified 8 years, 11 months ago by Sadegh.

Ich habe jetzt tief im Forum gegraben und ein Snippet aus 2014 gefunden, das tatsächlich noch funktioniert:

in der Datei
config-templatebuilder -> avia-shortcodes -> postslider.php
ca. bei Zeile 445 (nach dem Output der Kommentare)

hab ich das eingefügt:

//Fix zum Anzeigen von Kategorien
$category = get_the_category(); 
if(!empty($category))
{
$output.= '<span class="blog-categories minor-meta">'.__('Kategorie: ','avia_framework')." ";
$output.= $cats;
$output.= '</span><span class="text-sep text-sep-cat"> </span>';
}

Mit dem ALB-Element “Blogbeiträge” sieht das dann so aus:

Funktioniert prima!

hi victoria,

there is another thing on that mulitsite-website.
have a look on that domain (attached)

When you are on top position, the logo is not shown. If you scroll down, the small logo appears. if you scroll up again, you can see that the logo gets bigger, but then it is gone.

If you look on Chrome, you don’t see the logo, but only a link.

What could force that?
-> Of course i want the logo to be seen on the top

Hello Sarah, actually I’m looking at a single product page (see link in private content).
What I’d like to change is the font size/style of the product name, at the top of the page.

okay guys i 90% figured this one out, take a look at my myproblem page now

Using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 as my inspiration what I did was set the background image to contain.

I then set padding-top to be 52%. I did this because 1010 x 100 divded 1920 gives us 52%. So we know the height is to be 52% of the width.

I’ve almost got it all figured out but then realised dropping an element say text in the colur selection now pushes it down due to padding. So if you look at the w3schools example it applies some css to the text element telling it to move back up. Using position absolute and top 0.

How ever when I attempt to apply that to my text box in enfold it fails to have an impact. Any final pointers on how to achieve this so elements position properly within the color selection?

• This reply was modified 8 years, 11 months ago by codecreative.

Hi Sarah,
that works like charm, thank you!
Can you help me with the task to disply this background image on every single bbpress topic also? That would be great.
I have tried
.

single-topic .container_wrap_first {
   background-image: url("image.jpg");
}

but that leaves a small white bar under the header.

Best Regards

• This reply was modified 8 years, 11 months ago by Sigmund.

Hi Sarah,

Thanks but this setting will also change the desktop look. I would like to keep the 6 column display on desktop but have it as 4 on just mobile devices if possible.

Regards
Antonio