-
Posts
-
Hi,
The website owner wants to change is home page slider with a single image with text over. This image have to replace the slider with the same styling.
I have not found so far how to replicate the same visual effect with a single image with text over. I am still have margin problem to get the image full width and full responsive. There is also a problem with the white margin at the top.
Could you please help?
Thank you
GJ
Hey joshuabcohen,
Thank you for the inquiry.
Have you tried using the Media Elements > Fullwidth Easy Slider in the Advance Layout Builder (ALB)? To add text over the image, you can use Caption or the Slider Caption fields. For more info about the builder elements and the theme in general, please check the documentation below.
// https://kriesi.at/documentation/enfold/
Best regards,
IsmaelHello Ismael,
It is exactly what we already have Fullwith Easy Slider on ALB. But the website owner wants to change it for a single full width image with text over for SEO speed purpose.
What can you suggest to achieve this?
GJ
Hi,
Thank you for the update.
Have you tried using the Image element? Again, you can add captions, which will be automatically set as overlay. There’s actually no difference between a Fullwidth Slider with a single image and an Image element. Both will use the img tag with the alt and title attribute.
Best regards,
IsmaelHi,
Thank you for the screenshot.
You can place the Image element inside a Color Section, then apply the following modification (link below) to make the container inside the Color Section fullwidth.
// https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width
Best regards,
IsmaelHello Ismael,
I am able to fix some problem so far with your information. But I still have an important problem on cell display. Here is a screenshot:https://imgur.com/a/1ZpxHwq
Text lines are showing wrong and devided in rows but the padding is lost on the second row of each lineCan you please tell em how to fix it?
Thank you
GJ
Hi,
You can add this css code to adjust the width of the color section container on mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #section-container-width .container { width: 80% !important; min-width: 80% !important; } }You may need to adjust the styles of the following elements on mobile view. Instead of adding the styles inline, assign a unique class name to the < span > tag and define the css rules separately. This should allow you to adjust the style of the element for different screen sizes.
<span style="color: #ffffff; font-size: 34px; font-weight: 600; padding-left: 20%;">Online translation services</span>Best regards,
IsmaelHello Ismael,
The custom css for @media does not work. See the screenshot.
Do you have another solution ?
Thank you
GJ
Hi,
Where did you add this css code? We can’t find it in the Quick CSS field. This rule overrides the code that we previously suggested.
#section-container-width .container { width: 70% !important; min-width: 70% !important; }Best regards,
IsmaelHi,
For the QuickCSS field the furst time I use it it was not working at all. so I add it in therme – customize – additional CSS and it was working. so this time too I went to this place.
For the code you prevously suggest. It was not working with 80%. So I play around with with different % like 90, 70% etc and I let it at 70.
The problem with or without this rule is that whatever we choose from % there is always a break line occuring and the word after this break always goes too far at the left.
GJ
- You must be logged in to reply to this topic.