Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 3, 2014 at 11:16 pm #329944
    randallpacker

    How would I add an image css class to an image in the default editor order for it to fill the full width of the screen. I would like to work in the default editor without necessarily using the advanced layout editor, and be able to designate images as full width and responsive.

    Thanks.

    October 5, 2014 at 12:31 am #330347
    Andy

    Hi Randall!

    You can try to add this CSS to the image:

    position: fixed;
top: 0;
left: 0;
width: 100%;

    Hope that helps.

    Cheers!
    Andy

    October 5, 2014 at 10:48 pm #330609
    randallpacker

    Do I need to create a class for these attributes and place that in my custom CSS, or can I just input the attributes into the image css class field in the image?

    Thanks. Randall

    October 6, 2014 at 4:34 pm #330980
    Yigit

    Hi!

    You can turn on Custom CSS field for ALB elements and give your elements a unique custom CSS class and target them using Custom CSS code in Quick CSS field – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    Images however will not be displayed fullwidth because of the container. You can add your images inside a Color Section element with a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #your-custom-id .container { width: 100%; margin: 0; }

    Cheers!
    Yigit

    October 7, 2014 at 2:10 am #331269
    randallpacker

    Thanks Yigit, however this doesn’t seem to be working for me. I put this in my Quick CSS:
    #immersive .container { width: 100%; margin: 0; }

    And then put “immersive” in the Section ID of a color section, but the image contained within the section is not full screen:
    http:www.postrealityshow.com/customidwide

    Also, I was planning on using the color section Section ID’s for unique anchors, so a universal css script might not work for me.

    Best,

    Randall

    October 7, 2014 at 5:56 pm #331809
    Yigit

    Hey!

    Please use following code instead

    #immersive .container {
width: 100%;
display: block;
padding: 0;
}

    Best regards,
    Yigit

    October 7, 2014 at 6:48 pm #331833
    randallpacker

    Thanks Yigit, but this is still not working:
    http:www.postrealityshow.com/customidwide
    the image is still not full screen and is positioned in the upper left area.

    October 8, 2014 at 7:54 am #332176
    Ismael

    Hey!

    Please set the page’s Template to Blank | No Header, No Footer. Disable the Title Bar Settings. Add the Fullscreen Slider.

    Cheers!
    Ismael

    October 10, 2014 at 2:53 pm #333860
    randallpacker

    Hi Ismael, I wasn’t using a fullscreen slider, I was just trying to insert an image inside of a color section. Will it not work that way?

    October 10, 2014 at 3:08 pm #333865
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    #immersive .container { max-width: 100%; }

    Cheers!
    Yigit

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