Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #878363

    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.
    #878364

    More details

    #878365

    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.
    #879212

    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

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