[glutzkommunikation]

Hey Mohamad

Thank you very much for your code.
I’ve put it in and now it works on smartphone.

So I’ve create the following Codes:

@media only screen and (max-width:1024px) {
body{background-size:100% auto !important;}
}

@media only screen and (max-width: 979px) {
body{background-size:100% auto !important;}
}

@media only screen and (max-width: 768px) {
body{background-size:100% auto !important;}
}

@media only screen and (max-width: 479px) {
body{background-size:100% auto !important;}
}

Perhaps a little complicated but now it works perfect on smartphone and tablets – landscape and portrait-format.

Thank you for you’re quick help and greetings from Switzerland to you and your collegues.
Achim

[glutzkommunikation]

Hi Mohammad

Thank you, for your answer.
Attached, I send you 3 png-files (Screen iPad-landscape, Screen iPad-portrait, Screen Mac).
At the moment, I use the following CSS-Code:

@media only screen and (max-width: 479px) {
background-size:100% auto !important;
}

Can you give me the correct Code for smartphone and tablet?

Kind Regards
Achim

Attachments:

You must be logged in to view attached files.

[glutzkommunikation]

Hi Ed

Thank you very much for your answer.

This morning I’ve also tested the website and found out that everything is working fine.
I have no idea what happened … only know, that our customer has upload some pictures and wrote some text bevor Swift Page builder stopps working…Maybe changing the php-version by provider has solved the problem….?
For the moment I’m happy and hope this will not happen a second time.
I will check the plugin-errors.

Thank you for supporting and have a good time.
Achim

[glutzkommunikation]

Hello Flexform-Team

In the last 22 hours I’ve tried a lot of things.
– Changing the PHP-Version from 5 to 7… to 5.6…
– uploading up the new Shortcode.php…
– uploading up the complete page-builder-folder from another flexform-installation
… without sucess.

Can anybody help me, please?!

[glutzkommunikation]

Hello David
You make my day!!! It works perfect!
Thank you very much.

Many greetings to you and your colleagues
and have a good time.

Achim

[glutzkommunikation]

Hello Mohamad!

Thank you very much for your answer. Now, the menu is centered in all named browsers. YEAH!!!
The last challenge for now is stretching the navigations background to full screen width.
Any idea to solve this problem?

Kind regards
Achim

[glutzkommunikation]

Good Morning David

I’ve copied the code in and… it works…!!!
Thank you very much for your help.

One last question for this thing:
When we want to use this look for tablet and mobile view…
is there any way to solve it with also with custom css?

Thank you and have a nice day
Achim

[glutzkommunikation]

Hey David

Funny things happened…
I’ve put the correct code in:

—
#header-section {
padding: 0 0 !important;
border: none;
}

#header-section {
width: 100%;
max-width: 1170px;
}

#logo{
width:400px;
float: 50px;
align: left !Important;
}

#nav-section {
top: 5px;
float:right; clear:left;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.7);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

nav .menu ul li{
font-size:16px;
font-family: Kameron;
font-weight: 300;
align:right;
}
}

—

Take a look at the attached screen…
Now the whole header has moved ca. 30px to left.

Thank you for a new idea..
Achim

Attachments:

You must be logged in to view attached files.

[glutzkommunikation]

Hi David

Thank you for your very quick answer.
I’ve put the code in, but nothing happen…

Following my complete custom css:

#header-section {
padding: 0 0 !important;
border: none;
}

#header-section {
width: 100%
max-width: 1170px;
}

#logo{
width:400px;
float: 50px;
align: left !Important;
}

#nav-section {
top: 5px;
float:right; clear:left;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.7);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

nav .menu ul li{
font-size:16px;
font-family: Kameron;
font-weight: 300;
align:right;
}
}

Any idea what goes wrong?

Kind regards
Achim

[glutzkommunikation]

Hello Mohammad

OK, I will try it over the WPML-supporters.
Thank you very much for your patience.
You’ve helped me a lot anyway.

Kindest regards to you and your colleagues.

Achim

[glutzkommunikation]

Hi Mohammad

I’m afraid that was a misunderstanding….?!
The position from the language switcher is ok (look at my screenshots).
But if you chose one language, the the order of languages is changing.
Situation at the moment, if you are choose…

German        =     <span style=”color: #339966;”>DE</span>  EN  ES  PT
English          =     <span style=”color: #339966;”>EN   <span style=”color: #000000;”>DE  ES  PT
Spanish         =     <span style=”color: #339966;”>ES</span>  DE  ES  PT
Portuguese   =     <span style=”color: #339966;”>PT</span>  ES  EN  DE</span></span>
I would prefer:

German         =       <span style=”color: #339966;”>DE</span>  EN  ES  PT
English          =        DE  <span style=”color: #339966;”>EN</span>  ES  PT
Spanish         =        DE  EN  <span style=”color: #339966;”>ES</span>  PT
Portuguese   =        DE  EN  ES  <span style=”color: #339966;”>PT</span>

 

Kindest regards
Achim

Attachments:

You must be logged in to view attached files.

[glutzkommunikation]

…. Sorry, but they are still moving…  🙁
I’ve cleared all the browser caches (safari, firefox, chome).
The result is always the same.
Sorry for that…

[glutzkommunikation]

Good Morning, Mohammad,
Hello Support-Team

I have cleared the browser cache but nothing change. (www.aguaverde.ch/wordpress)
If you chose one language, the position always change to the right side.
<span id=”result_box” class=”short_text” lang=”en”><span class=”hps”>Desired</span> <span class=”hps”>situation: the order of the languages are fixed (DE  EN  ES  PT).</span></span>

Following the compled custom-css-codes:

#header-section{
padding: 0 0 !important;
border: none;
}

/* Full width logo code */
#header-section #logo{
width: 100%;
float: center;
}

#header-section #logo img, #header-section #logo img.retina{
margin: 0 auto;
float: center;
width: 200px; /*adjust as necessary*/;
}

/* Full width menu code */
#nav-section{
width: 98%!important;
}

li.menu-item-language{
float:right !important;
}

li.menu-item-language:first-child{
margin-left:46% !important;
}

li.menu-item-language-current > a{
color:#317930 !important
}

nav .menu ul li{
font-size:14px;
font-family: Source Sans Pro;
font-weight: 400;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.8);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

#main-navigation{
float: none;
width: 100%;
height: 48px;
text-align: left;
}

nav .menu li{
float: none;
}

.nav-wrap{
float: none!important;
}

/* Responsive code */
@media only screen and (max-width: 767px) {
#header-section #logo img, #header-section #logo img.retina {
margin-bottom: 20px;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);

 

Thanx
Achim

[glutzkommunikation]

Hello again, Mohammad

I’ve put the code in but nothing change.
So I think, that do not solve the problem.
Any other Ideas?

Thank you for your patience!

[glutzkommunikation]

Hey Mohammad

Sorry, but if I remove this one, the language-switcher tuns back to left behind the main-navigation.

Is there a bug in one of my other custom css-codes?

#header-section{
padding: 0 0 !important;
border: none;
}

/* Full width logo code */
#header-section #logo{
width: 100%;
float: center;
}

#header-section #logo img, #header-section #logo img.retina{
margin: 0 auto;
float: center;
width: 200px; /*adjust as necessary*/;
}

/* Full width menu code */
#nav-section{
width: 98%!important;
}

li.menu-item-language{
float:right !important;
}

li.menu-item-language-current > a{
color:#317930 !important
}

nav .menu ul li{
font-size:14px;
font-family: Source Sans Pro;
font-weight: 400;
}

nav .menu ul{
background: rgba(255, 255, 255, 0.8);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}

#main-navigation{
float: none;
width: 100%;
height: 48px;
text-align: left;
}

nav .menu li{
float: none;
}

.nav-wrap{
float: none!important;
}

/* Responsive code */
@media only screen and (max-width: 767px) {
#header-section #logo img, #header-section #logo img.retina {
margin-bottom: 20px;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);

 

Thank you
Achim