-
Posts
-
Hallo,
bin neu hier, habe leider nur geringe Kenntnisse von HTML/CSS, aber doch eine Frage…Auf der Homepage soll direkt und ohne Abstand unter dem Advanced Layerslider ein einfaches Bild eingefügt werden.
Könnte mir jemand ein entsprechendes CSS-Beispiel erstellen und mir dann auch noch sagen, wo man diesen Code einfügen muss?
Vielen Dank!
=============================
Hello,
I’m new here, have little knowledge of HTML / CSS unfortunately, but already have a question …I want to insert a simple picture directly without any distance under the Advanced Layer Slider on the homepage.
Could someone create a corresponding CSS example and then also tell me where to place this code?
Thank you!
Hi michasvision!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.page-id-2666 .content { padding-top: 0; }You just need to change page ID on your particular page. For more info, please see https://kriesi.at/support/topic/mini-heading-in-page/#post-188120
If that does not work, please post the link to your websiteCheers!
YigitThat was very helpful, thank you!!
The image is now directly beneath the slider.Now I want it to be flexible, ie. dynamically resize along with the browser window.
I think in CSS you would set “max-width: 100%;” and “height: auto;” …Can you help me achieve that with Quick CSS in Enfold ?
And there seems to be a small border around the image element, how can I remove that?Thank you!
Hi!
You can use Promo Box elements instead of Image Element and in my opinion it will be easier to achieve what you would like to achieve. You can choose not to display button on Promo Box and we can provide you custom CSS code to style it as your image. And there would be no issue displaying it on mobile devices
Regards,
YigitHey!
Please add following code to Quick CSS as well
body .container_wrap .avia-builder-el-first { background-color: #3C3C3C; color: white; border-radius: 5px; } .av_promobox { padding: 15px 30px; } .avia-promocontent p { font-size: 18px; }Best regards,
YigitHey, that’s great!
It is looking exactly like the image i used before, but as you mentioned it is much better for mobile devices. Great!Now, the only thing left is my original problem :))
How do I get the promobox to dynamically resize along with the browser window?Thank you!
Hey!
It should be resizing flawlessly right now. I am not sure if i understand what exactly the issue is. Can you elaborate?
Cheers!
YigitOh, sorry, did not explain that correctly.
The slider will be full-width (browser), and I want the promobox to be that wide, too…
I have played with some settings on the live-site, it is back to full width now.Thank you!
Hey!
In that case, you can put Promo Box inside a Color Section element and add following code to Quick CSS in Enfold theme options under Styling tab
#av_section_1 .container { width: 100%; }Best regards,
YigitHowdy,
good idea, but now the promobox (see above) does not get any CSS formating.
The css styling of the promobox has now moved to the next element (first column)…My Quick CSS content:
.page-id-734 .content { padding-top: 0; }
#av_section_1 .container { width: 100%; }
body .container_wrap .avia-builder-el-first {
background-color: #3C3C3C;
color: white;}
.av_promobox { max-width: 100%;
padding: 15px 30px; }
.avia-promocontent p {
font-size: 18px;
}I assume the promobox is not “.avia-builder-el-first” any more…?
Can you help?
Hi!
The promo box is responsive and it is full width when I checked the site. You can use this selector to change it:
.av_promobox { position: relative; border-width: 1px; border-style: solid; overflow: hidden; padding: 20px 30px; clear: both; margin: 50px 0; width: 100%; float: left; padding: 15px 10px; }Cheers!
IsmaelHey,
the “Color Section with Promo Box”-Element is now fullwidth. GreatBut
.. the “Color Section with Promo Box”-Element should be directy beneath the Layerslider.
Unfortunately there is a big space between them now.Can you send me the complete contents of the Quick-CSS?
Please check again…
Thank you!
- The topic ‘CSS needed’ is closed to new replies.