-
Posts
-
Hello, I have two layersliders created. Using the Avia layout builder, I placed the second one below the site under some content, but the issue I am having is that it does not go full width like the top placed layerslider.
Hey asifkabani,
You have it inside a color section, please try without a containing element. It won’t go full width otherwise.
Thanks,
RikardIt’s not inside a color section, look again. If you go to pages its called landing page. At the bottom it is the second last item right before the contact form.
Hey!
I have edited the page and as Rikard said, I can see it on a color section inside.
Can you please double check it and follow rikard suggestion?Best regards,
BasilisHello, please see screenshot attached. I looked in the page and I don’t see a color section behind the layer slider.
Hello, any update on this? Or if it is going to take a while can you please just go ahead and fix it in the page itself?
Hey!
There’s something weird going on in your installation. The layer slider somehow forces itself to relocate inside the top color section. For a temporary fix, we added a color section on top of the layer slider then added a few css modifications inside a code block. Please check it here: http://mantrisstand.com/
Regards,
IsmaelThank you, its looking normal on the desktop view, however when I resize the site this is what it does:
Is there a way to make it full width on the responsive side and not cut off?
Hey!
Please add the below css in Quick CSS
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%!important; max-width: 100%!important; } .ls-wp-fullwidth-helper { position: absolute; left: 50%!important; transform: translateX(-50%)!important; } }Regards,
VinayHello,
I updated the code with what you provided, and now when I resize my screen, the padding of all the sections is gone. Please see this screenshot:
So is there a better way of doing this? All I want is that bottom image before the form to be full width and not cut off when it is responsive. How can I do this? I tried to insert the image through media elements but the image does not go full width, thats why I had to use layerslider.
Hey!
refrain from bumping into your own thread, as it pushes it behind in our queue and marks it as answered and then we can’t provide a faster reply to you.
I checked page in private content, but could not see the issue you are showing on your screenshot. Could you fix it already? if not, which browser and OS are you using?
Best regards,
AndyOh okay thanks for the heads up.
So I was given this code to put:@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
width: 100%!important;
max-width: 100%!important;
}
.ls-wp-fullwidth-helper {
position: absolute;
left: 50%!important;
transform: translateX(-50%)!important;
}
}After I did that, I took screenshot of the page before and after. Then I removed the code so the live site does not look messed up. I just put the given code back up again so you can see what is going on. All I want is the bottom second last image to keep its full size at 100% width even when it is responsive.
Hey!
Thank you for the update. We removed the css code in the Quick CSS field and then modified the code block containing the css modifications for the color section. Please remove browser cache then reload the page: http://mantrisstand.com/
Regards,
IsmaelThank you, on the mobile version the right side of the image is being cutoff please see screenshot:
What is that dependent on? Basically want the full image to show even on mobile without cutting off to the right.
Hi!
try this code in Quick CSS field:
@media only screen and (max-width: 767px) { img.ls-bg.ls-preloaded { width: 121% !important; }}and adjust if needed.
Cheers!
AndyHey!
I put this code into your Quick CSS field:
@media only screen and (max-width: 767px) { img.ls-bg.ls-preloaded { width: 101% !important; left: -34%; height: 301px !important; top: -37%; }}and now it seems to display fine on mobile. Can you confirm please?
Regards,
AndyHey!
image seems good to me. If you want to change height then simply adjust the height value in my code.
Cheers!
AndyThanks now I see, one last issue.
The logo at the top of the page is centered but when the site goes responsive the logo moves to the left. How do I keep it in the center?
Hey!
Please use this:
@media only screen and (max-width: 767px) { .responsive #top .logo { text-align: center; } .responsive .logo img { display: inline-block; top: 15px; } }Cheers!
IsmaelHello, I have a section on the page called “See it in action” where I have embedded an iframe. How do I make it so that the iframe content or code block shows my full iframe content? Currently it is limiting the content to 910px width.
- You must be logged in to reply to this topic.