Hello
I have to place content with background-color over a background image.
I tried with a div



<div style="position: absolute; left: 0px; top: 40px; width: 500px; height: 510px; background-color:#ffffff; padding: 10px;">
<p>content</p>
</div>

iyengar-yoga

but the position:absolute isn't responsive.


2. Is there a better solution, perhaps with modules and z-index to place content responsive over a background.

regards
marc

Hi Marc,

You could try adding the image to the row via the template settings

In the article use the shortcode syntax to create 2x columns and a class to the left with the background of white

I'm not quite sure what you mean by the image not being responsive as it does appear to be responsive when I view it

The columns will drop below each other as the screen width decreases so you may want to try the text on the right to see how that looks

If the image doesn't work via the template settings you may want to consider using media queries for different background images

The images works responsive and for the for divs with background-color and text i gave % for width. It works now. But i have another question:


In chrome and firefox theres still a gap at the right site of the menu. How can justify the .zen-menu-horizontal ul

link



display: flex; or something?

regards marc

hmm not 100% sure how best to handle this

You might need js

You could try something like

ul.first-level li:last-child {margin-right:0;}
ul.first-level li:last-child a {padding:0 2em}

and see how this looks

Cheers
Paul

thanks a lot

a litte bit better, but is there a way to align the menus without padding?

regards

marc

Hello Paul

Just one more question (for now..)

ul.first-level li:last-child {margin-right:0;!important!}
ul.first-level li:last-child a {padding:0 1.9em;}

works for chrome and firefox bot safari ignores it

webkit-..?

thx marc

And how can i adjust the different line-height webkit to moz/chrome:

link

thx for help

Hi Marc,

It is a tricky one to answer as I would do this a different way

With safari are you referring to safari on a mac?

There is quite often some minor differences in font rendering unfortunately between browsers

I'd try removing the br tags and using p tags and style them with margin as a test

I'd also test by removing the links to see that is a factor

yes i meant safari on mac.
The problem is the letter-spacing in safari
Safari renders it wider than other browsers.
I could fix it for aktuell-workshops wirh some additional line breaks.
But the mainmenu width is still larger in safari as in chrome/ firefox.



How can i add a css roule for less letter-spacing in safari?

Does it render ok in ios?

Cheers
Paul