There is something completey weird with it
I used your code, it changed but now i cant change it to anything else…its stucked on 20 px and whatever i do…..20em…200px…whatever…
Nothing changes.
Wi do not have any caching plugins and yes …i used Strg & F5 several times and i changed the browser as well

Regards Martin

Hi Andy
the only thing you have to do is to let me know what file(s) is / are responsible for the output (see number 2 in my last post)

Alternative: Show me a gallery-version that let us use reasonable descriptions
Styled tooltips are nice but if its not possible to give a user useful informations its just a gimmick and not a useful thing.

Regards Martin

@victoria
there are more than 500 device-sizes out there.
Adressing every single one of them by media-queries cant be a proper solution

@rikkard
Hi Rikard
stacking when the images starts to scale doesnt work cause that would be on around 1200px and this much to early.
Can you please tell me more about your other idea (“add it as a background to the element“)?

@mods
Are there some other possible ways to get that done? (Would it be an idea to disable the scaling on the image?)

Martin

Hi Rikard
stacking when the images starts to scale doesnt work cause that would be on around 1200px and this much to early.

Can you please tell me more about your other idea (“add it as a background to the element“)?

Are there some other possible ways to get that done? (Would it be an idea to disable the scaling on the image?)

And….
here i set up a testpage for learning / research purposes:

As you see its just a simple textbox & the image from Enfold – no interfereces with Ubermenu or other Plugis or so.
Can you please tell me:
Where in Enfold is the breakpoint defined that makes the textbox stack over the image?

Kind Regards Martin

Hi Ismael,
yes, ok, but can we use width: auto; or does it create problems?

Kind regards
Martin.

Hi Ismael
thanx again.

Can you please leave that thread open??
I guess that i will have twor or three minor things but first i have to adjust some other elements before i can go further with the header.

Kind regards martin

Hi Ismael
GREAT & THANK YOU VERY MUCH.

There is no issue with the Ubermenu – it was just for your information that there is some CSS regarding the header.

But i have one (probably) minor thing i fiddle around for a while now.
Can you please help me to understand where i have to look for the solution?

The problem:
The text “Kontakt” & “Anfrage stellen” should be a bit closer at the icons.
This value for addheader2 & addheader3 would be perfect for desktop:
padding:0 55px 0 0
If i do that and than resize the screen the text is to close and overlaps the icon short before the breakpoint.
I tried it with a relative value ” padding: 0 3% 0 0″ but that didnt help neither.
Then i tried it with variations of margin and / text-intent but i cant solve it.
Could you please point me at least in the right direction to find the solution?
(Sometimes its just small things that can drive you crazy – doesnt it?)

Kind regards Martin

Hallo Ismael
i added your CSS but had to change the value from 156px to 150px – otherwise the logo was chopped of a bit on the bottom.

This shows how the additional elements should be positioned in mobile devices.
Just right beside the logo
https://drive.google.com/open?id=0BzF3a9LXV99JOWxtdTFhS3dsVlE

The settings we have is:
Stretched layout by 1310px
Logo left / Menu below
Breadcrumb & Title = NO
Header-Size= Big
No Extra-Elements

This is what we already have in our CSS regarding the header

#header #header_main_alternate .container {
  padding: 0px !important;
}

#header_main_alternate{
	display:block !important;
} 

The last one is to solve the “residiual styling” problem for Ubermenu from SevenSparks

Then we have this but it should only affect the <divs> we have added already.
I am not sure if its correct.

.addheader {
  float: right;
  width: 45%;
  color: #222 !important;
  text-transform:uppercase;
}
.addheader a {
color:#ccc !important;
text-transform:uppercase;
font-size: 100%;
}
.addheader1 {
  background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/schloss.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;
}
.addheader2{   background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/anfrage.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;}
.addheader3{   background: rgba(0, 0, 0, 0) url("http://dpg.4lke.de/wp-content/uploads/rueckruf.png") no-repeat scroll 0 0;
  border: 1px solid #ccc;
  float: left;
  min-height: 51px;
  padding: 0 12px 0 0;
  text-align: right;
  width: 24% !important;}
  .widget.clearfix.widget_text {
  position: relative;
  top: 117px;
  right: 65px;
}

Kind Regards martin

I forgot to mention the URL:

I am already quite far but here some specific questions:
1: How can i reduce the distance between the upper browserwindow edge and the logo?
2: How can i make the logo bigger? (if i use the “custom pixel value setting” for the header it influences the whole header but i just want to make the logo takes more space)
3: Something is wrong with the CSS cause it does not adapt properly if i minimize the browser window.

Thanx Martin

Hi Rikard
giving you the link doesnt make sense at this point since i dont even come close to it.
Every approach seems to be wrong.
Please just let me know what the right approach would be.
Grid-rows or layout column? Then i can do a reasonable start instead of fumbling arround and get frustrated.
Thanx
Max

I definitely dont want any “step by step-instruction”.
I tried more than two hours and every solution that came into my mind – from grid-rows to any kind of version with layout columns – but nothing worked.
Then i gave up.

Hi Yigit
it didnt help, sorry:
Devarea: http://dpg.4lke.de

Regards Max

Yes , of course ….but then i am closed to an oldschool manualy crafted HTML webpage.
An experienced Mod like you for sure has something more sophisticated (some PHP for our child-themes functions.php)
Please share your knowledge with us.

Regards Max

Hallo Rikard
not really.
https://drive.google.com/open?id=0BzF3a9LXV99JSHRLME1kVFFNVVk
Optical similar but the links are on the title and not on the images (which have been added by the standard WP function “add media”).
If you tell me a solution how to bring the links on the images for that i think my boss can live with it
Kind regards Max