Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 18, 2017 at 6:13 am #878363
    bnel

    Looking to solve an issue.
    Looking to have a Image that covers 100% of Browser width and then add text overlay.
    I have tested the Color Section with Code box and using a Background image of 1200px * 500px
    I will have +- 6 Colour sections to show 6 Large images with Text overlays.
    This works well when you use desktop or tablet.
    When I use Smart Phone there is large white space inbetween colour sections as I have had to state the color section should be 500px in height to show the full background image.

    If I use an Image element inside a column section then I cant seem to add an text overlay and then it also does not extend 100% width of screen.

    Any ideas

    See link below: https://webatwork.com.au/demo-2

    • This topic was modified 7 years, 6 months ago by bnel.
    November 18, 2017 at 6:38 am #878364
    bnel

    More details

    November 18, 2017 at 6:42 am #878365
    bnel

    Can you also help me with making the text and overlay stay uniform to the size of the image and screen when changing to smaller screen sizes?
    Example- if I change the screen to a small Phone screen then the text overlay is not uniform in size to the image and text stays the same size.
    CSS used: on first two images:
    <h1 style=”padding: 20px; background: rgba(191,119,135,0.3);color: white;vertical-align:middle !important;position:absolute;font-family: Roboto;font-weight: bold;”>Looking to take your business to new heights</h1>

    The 3rd Image on the Demo page is just using Code box but still having issues with the Text overlay not staying uniform to the size of the image when changing screen sizes. Different CSS used here:
    I also cannot force the image to be full Browser width when not using a color section.

    See link below: https://webatwork.com.au/demo-2

    • This reply was modified 7 years, 6 months ago by bnel.
    November 20, 2017 at 4:41 pm #879212
    Victoria

    Hi bnel,

    You will be able to see only a part of the image this way. There is no way to scale such an image to 479x500px.

    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-full-contain {
    background-size: cover !important;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.