-
Posts
-
Hi, I have a full width layout element which contains an image. Over this I want a transparent block which holds text – I’m using a Code Block for this and using this code:
<div style = “padding: 20px; background: rgba(0,0,0,0.5); font color: red;”>
B O O K N O W
Prices are quotes on application depending on your requirements. Please note the cost is redeemable against further services.
</style>However I want the text to be solid white.
How do I need to adjust my code?
On the link provided, the first image is how I want it to look and the second is where I’ve got so far.
(This is a work around as on Mobile view I’m loosing the text in the image box)Thanks.
Tess.Sorry the code I provided above was incorrect, I’m actually using:
<div style = “padding: 20px; background: rgba(0,0,0,0.5);”>
B O O K N O W
Prices are quotes on application depending on your requirements. Please note the cost is redeemable against further services.
</style>Hi,
<div style = "padding: 20px; background: rgba(0,0,0,0.5);"> <span style="color: #fff; position:relative;">B O O K N O W Prices are quotes on application depending on your requirements. Please note the cost is redeemable against further services. </span> </div>That SHOULD fix the issues properly
Best regards,
BasilisHi, this isn’t quite working. I’ll go back a step and explain what I’m trying to achieve because I was probably confusing the issue.
(I’ve removed all other images other than what I want it to eventually look like.)The problem is this, the text over the image looks fine on normal screen. However, when viewed on mobile – 360 or 320px wide – the text ‘Book Now’ which is over the image disappears and I want to see all of the text including the ‘Book Now’ text when viewed on mobile . If there’s a solution to fix that it would be great – as there is a link on the ‘Book Now’ which leads to a form.
My use of the Code Block was a work around trying to fix the ‘disappearing text’ problem.
Hi,
We would like to check the preview but we don’t have access to the site. Please provide the login details and a screenshot of the layout. It will make it easier for us to understand.
Best regards,
IsmaelOf course it would.
I’ve created a draft page http://www.brideandbelle.co.uk/xxxxxxx-mobile where I’d been testing different work arounds.
Ultimately I want it to look like this – http://www.brideandbelle.co.uk/weddings/the-little-planning-service/ – but with the mobile behaviours fixed.Hi Basilis, the page is loading fine for me – have checked both links I sent to you.
In order to see the ‘xxxxx-mobile’ page you’ll need to be logged into the WP dashboard
If you could try again and let me knowThanks.
Tess.
Hi Tess,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 479px) { .avia-slideshow li img, .avia-slideshow-inner { min-height: 160px; } }If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.