Return to previous page

Footer icons - by bazarcollective - on WordPress WooCommerce support

This topic has 25 replies, 4 voices, and was last updated 9 years, 3 months ago ago by Jack Richardson

  • Avatar: bazarcollective
    bazarcollective
    Participant
    November 6, 2015 at 17:52

    hello guys
    i need help w a couple things on my footer. id like to add space between “follow us” and social icons/ center social icons under “follow us” also want to change the color, size for payment options. i had someone on fiverr helping but they kept having trouble everytime they add an edit the social icons on my front page distort on pc/mobile. ive included a screen shot, hope you can help.
    thanks

    Please, contact administrator
    for this information.
    #98206 Copied Theme version: 2.3 WooCommerce version: 4.3.1
    24 Answers
    Avatar: Eva
    Eva Kemp
    Participant
    November 6, 2015 at 18:34

    Hello,

    Please provide us with wp-admin panel credentials in Private Content.

    Regards,
    Eva Kemp.

    #98213 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 6, 2015 at 19:28

    ok. sure

    Please, contact administrator
    for this information.
    #98215 Copied
    Avatar: Robert Hall
    Robert Hall
    Participant
    November 7, 2015 at 09:35

    Hello,

    I’ve added the following code in Child Theme. Please check it.

    #mla-text-widget-2 .widget-title{
    margin-bottom: 48px;
}
.soci-icons2 .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner{
    margin-left: 3px;
}
.payment-methods {
    color: red;
    font-size: 10px;
}

    Regards,
    Robert Hall.

    #98242 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 7, 2015 at 13:11

    Hello Robert
    thanks for that!
    what code can i add to move the subcribe form to the left?
    looks a little off.
    thanks!

    #98255 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    November 8, 2015 at 09:48

    Hello,

    I’ve edited the code in Theme Options > Custom CSS > Global Custom CSS from:

    .soci-icons2 {
  margin-right: 85px;
}

    to

    .soci-icons2 {
  margin-right: 50px;
}

    Please check now.

    Regards,
    Eva Kemp.

    #98291 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 9, 2015 at 04:16

    hey guys i didnt check the icons on mobile before. the icons shift to the left its the same thing we were having trouble w everytime we tried an edit. please look at my screen shots both mobile and landscape view.
    thanks

    Please, contact administrator
    for this information.
    #98354 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 9, 2015 at 08:36

    Hello,

    What browser are you checking in?
    I see this footer on desktop:
    http://storage1.static.itmages.com/i/15/1109/h_1447054584_8450452_69261315cd.png

    Best regards,
    Jack Richardson.

    #98362 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 9, 2015 at 13:54

    its on mobile view iphone 6 plus did you see both screenshots i attached?

    #98424 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 9, 2015 at 13:56

    both screen shots are from iphone6 plus vertical and landscape mobile view

    #98425 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 9, 2015 at 19:05

    Hello,

    Add this code in Custom CSS for mobile:

    .widget_mc4wp_widget .widget-title {
    width: 300px;
}
.footer-top .widget_mc4wp_widget {
   padding-top: 50px;
}
.soci-icons2 {
    border-right: none;
}

    and this code to Custom CSS for mobile landscape:

    .footer-top .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 150px;
}
.soci-icons2 {
   border-right: none;
}
.widget_mc4wp_widget .widget-title {
    width: 300px;
    margin-left: 150px;
}

    Best regards,
    Jack Richardson.

    #98498 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 10, 2015 at 05:35

    Hello Jack ive tried adding the codes in Custom CSS for mobile and CSS for mobile landscape but everything is still the same. anything else i can try?

    #98561 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    November 10, 2015 at 09:21

    Hello,

    As I see now footer is shown properly:
    http://storage4.static.itmages.com/i/15/1110/h_1447143675_2630567_63ce7f9eb3.png

    Please show us screenshots from your side.

    Regards,
    Eva Kemp.

    #98584 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 10, 2015 at 14:25

    Hello Eva
    Have you read the trough thread? The footer is good in pc view. Its the mobile and mobile landscape views i need help w. The footer in mobile /mobile landscape view looks the same as prior screenshots i had attached. The only thing that changed slighty after adding the codes that Robert provided was the text for the subscribe box. here are the screen shots again. let me know if you need anything else.
    thanx

    Please, contact administrator
    for this information.
    #98661 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 10, 2015 at 17:15

    Hello,

    I’ve added this code in child style.css file:

    @media (max-width: 480px) {
  .widget_mc4wp_widget .widget-title {
    width: 300px;
}
.footer-top .widget_mc4wp_widget {
   padding-top: 50px;
}
.soci-icons2 {
    border-right: none !important;
}

.footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 70px;
}}
    @media (min-width: 480px) and (max-width: 680px) {
  .footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 200px !important;
}
.soci-icons2 {
   border-right: none !important;
}
.widget_mc4wp_widget .widget-title {
    width: 300px !important;
    margin-left: 150px !important;
}}

    Please clear browser cache and check footer now.

    Best regards,
    Jack Richardson.

    #98688 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 10, 2015 at 17:47

    hello jack
    i checked both views and now the icons and subscribe form text are to right on mobile and icons are to left on landscape. see screenshots

    Please, contact administrator
    for this information.
    #98699 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 10, 2015 at 19:36

    Hello,

    As I see you edited the code I provided in the previous post.
    I’ve edited it back.

    Please check the site now.

    Best regards,
    Jack Richardson.

    #98715 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 11, 2015 at 05:03

    Hey guys
    Im starting to think i wont ever get this fixed.
    Maybe too difficult? im checking the footer on iphone 4 also iphone 6 plus.
    footer looks different for both. here are the screen shots.

    Please, contact administrator
    for this information.
    #98771 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 11, 2015 at 08:58

    Hello,

    Please look at the screenshots what I see from my side:
    http://storage8.static.itmages.com/i/15/1111/h_1447228645_4511102_9009a478d0.png
    http://storage1.static.itmages.com/i/15/1111/h_1447228689_6464611_bbb2d66368.png

    Please try to check with other devices and other Internet provider.

    Thank you.

    Best regards,
    Jack Richardson.

    #98792 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 11, 2015 at 16:55

    ok i checked and it only looks like that for iphone 6. the footer isnt properly showing for iphone 4/ iphone 5/ iphone 6 plus. do they all need different css?

    #98906 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 11, 2015 at 18:19

    Hello,

    I’ve edited the code in child style.css file to this:

    @media (max-width: 480px) {
  .widget_mc4wp_widget .widget-title {
    width: 100%;
}
.footer-top .widget_mc4wp_widget {
   padding-top: 50px;
}
.soci-icons2 {
    border-right: none !important;
}

.footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 20%;
}}

@media (min-width: 480px) and (max-width: 680px) {
  .footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 36% !important;
}
.soci-icons2 {
   border-right: none !important;
}
.widget_mc4wp_widget .widget-title {
    width: 50% !important;
    margin-left: 20% !important;
}}

    Please check footer now.

    Best regards,
    Jack Richardson.

    #98922 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 11, 2015 at 18:44

    ok finally its getting there! 🙂
    all views are good except iphone 6 plus the twitter icon appears below the instagram icon and on iphone6+ landscape view the icons and “subcribe to our nesletter” arent centererd theres also a border line that should only be visible on pc view. im attaching a screen shot

    Please, contact administrator
    for this information.
    #98928 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 12, 2015 at 09:29

    Hello,

    I’ve edited the code again:

    @media (max-width: 380px) {
  .widget_mc4wp_widget .widget-title {
    width: 100%;
}
.footer-top .widget_mc4wp_widget {
   padding-top: 50px;
}
.soci-icons2 {
    border-right: none !important;
}
.footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 20%;
}}

@media (min-width: 380px) and (max-width: 480px){
  .widget_mc4wp_widget .widget-title {
    width: 100%;
}
.footer-top .widget_mc4wp_widget {
   padding-top: 50px;
}
.soci-icons2 {
    border-right: none !important;
}}

@media (min-width: 480px) and (max-width: 750px) {
  .footer-top.footer-top-1 .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    margin-left: 36% !important;
}
.soci-icons2 {
   border-right: none !important;
}
.widget_mc4wp_widget .widget-title {
    width: 50% !important;
    margin-left: 20% !important;
}}

    Please check now.

    Best regards,
    Jack Richardson.

    #99026 Copied
    Avatar: bazarcollective
    bazarcollective
    Participant
    November 12, 2015 at 17:22

    You did it! Looks great.
    Thank you so much for all the time and effort you guys put into 8 themes! learning so much from you guys 🙂

    #99145 Copied
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    November 12, 2015 at 18:33

    Hello,

    You’re welcome.
    We’d be thankful if you leave a comment on our site http://themeforest.net/item/royal-multipurpose-wordpress-theme/8611976/comments .

    Best regards,
    Jack Richardson.

    #99156 Copied

  • Tagged: , , , , , ,

  • Viewing 25 results - 1 through 25 (of 25 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Sneakers Store – WordPress WooCommerce Theme
lazy-placeholder
Language Courses – WordPress WooCommerce Theme
lazy-placeholder
Shoes Store – WordPress WooCommerce Theme
lazy-placeholder
Business Card – WordPress Theme
lazy-placeholder
Hipster Store – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
WooPress – Responsive Creative HTML5 Template
lazy-placeholder
Bakery Store – WordPress WooCommerce Theme
lazy-placeholder
Pub – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.