Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 31, 2017 at 2:39 am #769704
    fairusd

    Hi,

    I am trying to achieve a footer design: http://www.mws.ilc.sg/wp-content/uploads/2017/03/Footer-test.png

    Having some difficulty on how to achieve it as i can’t seem to figure out to do it.

    I have attached the test site link in the private content.

    Any help will be much appreciated!

    March 31, 2017 at 8:30 am #769776
    Jordan Shannon

    Hey fairusd,

    You can change the footer settings in the enfold theme option -> footer layout.

    To edit the content, you have to go to the widget customization.
    You’ll find it on the left side under “appearance”.

    There you can place widgets inside your footer areas.

    Best regards,
    Jordan Shannon

    March 31, 2017 at 12:30 pm #769903
    fairusd

    Thanks Jordan!

    There’s quite a big vertical spacing in between the two footers.

    Any way for me to decrease it?

    March 31, 2017 at 6:05 pm #770106
    Jordan Shannon

    Hi,

    Add the following to quick css:

    #footer {
    padding: 0px 0px 0px 0px!important;
}

#footer .widget {
    margin: 10px 0 0px 0!important;
}

    Let me know if this works for you.

    Best regards,
    Jordan Shannon

    April 1, 2017 at 12:26 pm #770306
    fairusd

    Wow Jordan you are one impressive guy!

    It works like a charm!

    One last request and i hope this is possible :)

    I want to add a website text link on bottom right of the footer as per the image attached.

    April 2, 2017 at 10:59 am #770592
    Rikard

    Hi,

    Please try adding this to the end of the Copyright field in the theme options:

    <a href="http://yoursite.com/link" style="float:right;">Link text</a>

    Best regards,
    Rikard

    April 2, 2017 at 11:15 am #770596
    fairusd

    Hi Rikard,

    Thanks! I tried it but the text doesn’t float to the right.

    April 2, 2017 at 6:43 pm #770700
    Mike

    Hi,
    Try this in your socket:

    © Copyright 2017 Methodist Welfare Services <div class="push-right"><a href="http://www.fastartup.com">Design by FASTARTUP</a></div>

    Try this code in the General Styling > Quick CSS field:

    .push-right{
position:absolute;
right:20px;
top:80%;
transform:translateY(-50%);
}
@media only screen and (max-width:767px) {
.push-right{
position:relative;
right:auto;
transform:none;
}}

    Adjust top & transform numbers to suit :)

    Best regards,
    Mike

    April 3, 2017 at 1:03 am #770813
    fairusd

    Hi Mike,

    Thanks for the help! Really appreciate it.

    It works however, you could see that it got bumped to the next line.

    And how do i make the footer + socket text to be align left in MOBILE as well?

    Thank you!

    April 3, 2017 at 6:31 am #770889
    Nikko

    Hi,

    Try to change this css code:

    .push-right{
position:absolute;
right:20px;
top:80%;
transform:translateY(-50%);
}

    to this one:

    .push-right {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
}

    For making footer + socket to align text on left, try adding this code:

    #footer .widget * {
    text-align: left;
}

    inside this:

    @media only screen and (max-width:767px) {

    Hope this helps :)

    Best regards,
    Nikko

    April 3, 2017 at 6:37 am #770895
    fairusd

    Hi Nikko,

    Awesome thanks!

    Tried your codes but the Facebook text now is left align and the Design by FASTARTUP text overlaps the copyright text in mobile.

    April 3, 2017 at 6:51 am #770899
    John Torvik

    Hi,

    Let us know if you have any other questions or issues :)

    Best regards,
    John Torvik

    April 3, 2017 at 6:56 am #770901
    fairusd

    Hey John,

    Still need assistance with the footer/socket CSS.

    April 3, 2017 at 8:13 am #770927
    John Torvik

    Hi,

    I am sorry about it.

    To fix it, just add this CSS at Enfold Theme Options > General Styling > Quick CSS

    
@media screen and (max-width: 480px) {
  .push-right {
   position: absolute;
   right: -20px;
  }
}

    Best regards,
    John Torvik

    April 3, 2017 at 8:34 am #770944
    fairusd

    Hey John,

    Thanks!

    Possible to float the Facebook text to the right in desktop?

    Link attached.

    April 3, 2017 at 9:32 am #770978
    Nikko

    Hi,

    You can float it to the right. This css code I gave you:

    #footer .widget * {
    text-align: left;
}

    Should be inside the:

    @media only screen and (max-width:767px) {

    it should be something like this:

    @media only screen and (max-width:767px) {
  #footer .widget * {
    text-align: left;
  }
}

    That should fix it :)

    Best regards,
    Nikko

    April 3, 2017 at 11:40 am #771031
    fairusd

    Hi Nikko,

    I copied your CSS but still not able to have the desired outcome.

    April 3, 2017 at 10:14 pm #771388
    John Torvik

    Hi,

    Just add this custom CSS code:

    
#text-3 .textwidget {
float: right !important;
}

    Best regards,
    John Torvik

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