0

I've got 3 problems coming together and they're driving me crazy.

1: Heading title within a box (max-width:1030px) should resize if the windows gets smaller. The outer borders of this title should always be on the outer borders of the surrounding box.

2: the menu below should overlap (visually cut of) the title a bit (margin-top:-1.5% or something like 30px). Problem: this works only until the window gets smaller than 900px wide. Below this value the menu seems to overlap to much on all browsers.

The biggest Problem: 3: I managed it once on firefox and chrome on windows, but! on a mac chrome and safari looks different. firefox is doing the same like on windows. So i was searching for another way but I didn't managed it.

Problem 1: manage responsive Heading scaling on window size -> svg with an text-element inside. solved!? The size of a SVG is obviously different on a mac than on windows.

Problem 2: negative margin with some responsiveness?

Problem 3: Is it possible to manage this on both OS? There is always one browser who is not working like the others and its getting me crazy.

I've added bright background-colors to the boxes to get a better feeling what's happening there. Please visit:

https://benhuebsch.de/wordpress

Problem 1: on Safari the svg text is a bit bigger than 1030px on all browser on both os.

Problem 2: I think my version is the wrong way, but I don't know how to manage this.

Problem 3: Maybe it's just impossible to achieve the same look across browsers.

Do you have some ideas?

Best, E-G

E.G
  • 25
  • 3
  • For now, the best browser is firefox on both OS. Correct scaling of heading title and negative margin. – E.G Jan 26 '19 at 23:41

1 Answers1

0

Problem 1: manage responsive Heading scaling on window size -> svg with an text-element inside. solved!? The size of a SVG is obviously different on a mac than on windows.

If it is the browser you need to know, you can use a variable in PHP

$_SERVER['HTTP_USER_AGENT']

You can also use the get_browser() function to check the details of your client's browser like it's version

$browser = get_browser(null, true);
echo $browser['version']; // will echo the client's browser version

Problem 2: negative margin with some responsiveness?

I think CSS media query is the one you're looking for here.

Problem 3: Is it possible to manage this on both OS? There is always one browser who is not working like the others and its getting me crazy.

Yes. Just compare the client's browser version. 

$browser = get_browser(null, true);
if($browser['version'] <= 1.0){
    // do something
}

If you are sure that it's not the browser version then you better off knowing the client's OS from this thread.

Bawm
  • 79
  • 1
  • 3