Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 20, 2017 at 7:43 pm #824825
    navindesigns

    Currently, on my site at the very bottom, I have some text in the socket area “Serving: Houston | College Station | San Antonio | Austin | Bryan TX and surrounding areas.” (in a script font). I would like to move that text above into the bottom of the footer but have it span the full width across all 4 footer sections. How do I achieve that?

    Home

    July 20, 2017 at 9:32 pm #824866
    navindesigns

    I managed to figure this out for the most part by using the following:

    #footer:after {
    content: ‘Serving: Houston | College Station | San Antonio | Austin | Bryan TX and surrounding areas.’;
    margin-left: 12%;
    font-size: 30px;
    font-weight: 100;
    text-align: center !important;
    letter-spacing: 2px;
    padding-bottom: 0px;

    }

    However, I cannot get the text to center? How do I achieve that?

    Home

    July 20, 2017 at 10:25 pm #824880
    Nikko

    Hi,

    Try removing the left margin:

    margin-left: 12%;

    and add:

    display: block;
width: 100%;

    Hope this helps :)

    Best regards,
    Nikko

    July 21, 2017 at 3:58 am #824931
    navindesigns

    thanks

    I now added more text and it shows up wrong

    how do i keep the text within the container of the site? now the texts are too far out on both right and left sides
    screenshot – http://imgur.com/a/Qzihs

    Also, how would I go about bolding certain words. I noticed the html tags does not work with this css code.I would like to make the words “Oh Snap Selfie Photo Booth” bolded

    Thanks

    July 24, 2017 at 6:53 pm #829139
    navindesigns

    any update please?

    July 24, 2017 at 7:07 pm #829151
    Yigit

    Hi,

    That is actually not really a good solution. We would recommend you to go to Enfold theme options > Footer and change footer column count to 5, add your content into 5th footer column in Appearance > Widgets and then to add following code to Quick CSS and adjust the values as needed

    #footer .flex_column:nth-child(5) {
    width: 100%;
}
#footer .flex_column:not(:nth-child(5)) {
    width: 20.5%;
}

    Best regards,
    Yigit

    • This reply was modified 7 years, 5 months ago by Yigit.
    July 24, 2017 at 9:05 pm #829202
    navindesigns

    That works but on mobile the widgets are not stacked ontop of eachother. How do I fix that?

    July 24, 2017 at 9:40 pm #829212
    Yigit

    Hey!

    You can add following code to Quick CSS as well to fix that

    @media only screen and (max-width: 990px) {
#footer .flex_column { width: 100% !important; margin-left: 0 !important; }}

    Best regards,
    Yigit

    July 24, 2017 at 9:44 pm #829217
    navindesigns

    Sorry, that did not work :(

    July 24, 2017 at 9:47 pm #829222
    Yigit

    Hi,

    Please change the code to following one

    #footer .flex_column:nth-child(5) {
    width: 100%;
    margin-left: 0; 
}
#footer .flex_column:not(:nth-child(5)) {
    width: 20.5%;
}
@media only screen and (max-width: 990px) {
#footer .flex_column { 
    width: 100% !important; 
    margin-left: 0 !important; 
}}

    If it still does not work, please create a temporary admin login and post it here privately so we can look into it

    Best regards,
    Yigit

    July 24, 2017 at 9:51 pm #829224
    navindesigns
    This reply has been marked as private.
    July 24, 2017 at 10:21 pm #829230
    Yigit

    Hi!

    You added !important rule to following selectors width

    #footer .flex_column:not(:nth-child(5))

    I removed it and that helped. Please flush cache and review your website

    Cheers!
    Yigit

    July 24, 2017 at 10:30 pm #829237
    navindesigns

    Thank you so much!

    July 24, 2017 at 10:42 pm #829243
    Yigit

    Hi!

    You are welcome! Let us know if you have any other questions or issues :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Make footer text span across all widgets’ is closed to new replies.