Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 6, 2017 at 2:32 am #743102
    Briana

    Hello,

    I have successfully found the following snippet of code to force images to be the full width of their container:

    .avia-image-container .avia-image-container-inner, .avia-image-container img {
width:100%;
}

    However, is there a way to adjust this so that only images that are set to align right or align left to be 100% width?
    I wasn’t able to find this specific setting on the forum.

    Thank you for your help.

    February 9, 2017 at 9:44 pm #745079
    Yigit

    Hey Briana,

    Please use following code instead

    .avia-image-container.avia-align-right .avia-image-container-inner, .avia-image-container.avia-align-right img { 
width: 100%;
}

    Best regards,
    Yigit

    February 10, 2017 at 1:09 am #745159
    Briana

    Hi Yigit,

    Thanks for your response. I implemented your code in replacement of mine and it doesn’t look to be working.
    All the images both left/right aligned and center-aligned are now back to their default settings.

    Here is a page that is a good example *see private link* *see private screenshot*

    Near the top there is an image on the right that I want to fit 100% of its container and then below there is a center aligned image that I don’t want stretching 100% of the container because it becomes fuzzy etc.

    Here is my current css:

    
.avia-image-container.avia-align-right .avia-image-container-inner, .avia-image-container.avia-align-right img {
width: 100% !important;
margin:0px !important;
}

.avia-image-container.avia-align-left .avia-image-container-inner, .avia-image-container.avia-align-left img {
width: 100% !important;
margin:0px !important;
}
    • This reply was modified 7 years, 9 months ago by Briana.
    February 14, 2017 at 4:05 pm #746946
    Andy

    Hi,

    use this code inside Quick CSS field:

    .avia-image-container.avia-align-right {
margin-left: 0px;
}

    Best regards,
    Andy

    February 15, 2017 at 1:40 am #747239
    Briana

    Thank you Andy :)

    I adjusted the code slightly and now it is perfect. Your theme support is the best as usual and greatly appreciated.

    .avia-image-container.avia-align-right {
margin-left: 0px !important;
width: 100% !important;
}

    This thread can be closed.

    February 15, 2017 at 4:53 am #747253
    Nikko

    Hi,

    Thanks for using Enfold and for the kind words :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Images set to 100% of Container on Left Align and Right Align Only’ is closed to new replies.