Navigation
Archive / Text in center of screen
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 28, 2016 at 5:01 am #1150337
    neodjandre
    Participant

    Hi,

    How can i put my text to be in the centre of a background image and always be in the centre for all screen resolutions?

    many thanks!
    Andy

    August 28, 2016 at 5:07 am #1150342
    Christopher
    Moderator

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    August 28, 2016 at 5:13 am #1150350
    neodjandre
    Participant
    This reply has been marked as private.
    August 28, 2016 at 5:31 am #1150366
    Christopher
    Moderator

    Hi there,

    The text is not centered since you’ve limited section’s height with following code :

    #koui.x-section.bg-image {
    height: 100vh;
}

    Please remove it and adjust section’s height by adding top and bottom padding .

    Thanks.

    August 28, 2016 at 5:49 am #1150376
    neodjandre
    Participant

    Hi, I am using that code so that the image takes the full length of the browser.

    If I remove it, and add padding as you suggested, will that work for all screen res ?

    I guess I should be adding the padding in % terms.

    August 28, 2016 at 5:55 am #1150381
    Christopher
    Moderator

    Hi there,

    No, you can’t achieve full screen section with padding.
    If the image is supposed to display full screen, I suggest you to create a slider (revolution slider) and set it below masthead. Add .masthead in slider’s containers field.

    Hope it helps.

    August 28, 2016 at 5:58 am #1150383
    neodjandre
    Participant

    I think what I am looking for is answered here

    https://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    I don’t use revolution slider. trying to keep plugins to a minimum! I will test the above link and let you know as I think it would be useful for other users.

    August 28, 2016 at 6:02 am #1150384
    Christopher
    Moderator

    Let us know if you have further questions.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1150337 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>