Trying to maker Footer area smaller


#1

Hi, I would like to make the footer area on my website smaller. I would like the top and bottom black area of the footer to be smaller so there isn’t so much unused black space.
Website Link:http://snapnbak.com

I would also like to make the gray background of the menu area longer to the right so it covers the entire screen. This problem is only my iPhone however and not on my laptop. Screenshot below is from my phone so you can see exactly what I mean

Screenshot Link: http://postimg.org/image/jnrah9k8d/

Thanks,

Ryan


#2

Hi,

Please add this code below to decrease the padding / black space of your footer section:

.footer-widgets {
    padding: 50px 0;
}

for your mobile view, you have to click the three bar to show the menu.
Then I found that the soundcloud widget are break the theme, the widget is try to apply the fix width. But you can try to add this code below to fix it:

.entry-content div {
    width: auto !important;
}

#3

Thanks that worked well but only in Safari. On Opera, Google Chrome, and Firefox you can see an area under the footer now that says, “Proudly powered by WordPress | Theme: Sydney by aThemes.” Is there any way I can chop off the entire bottom of the website a little bit? I would like the bottom of the website to end exactly where the footer ends.

Also, is there any way I can get the Menu items text fonts and Footer widget text fonts to be the same font, font size, and font color as they are on Safari. On Opera, Google Chrome, and Firefox the menu items text fonts are the wrong font, color, and size. And on Opera, Google Chrome, and Firefox the footer font used is the wrong font and color.

Basically I just want the site to look exactly the same on Opera, Google Chrome, and Firefox as it does on Safari. I put screen shots links below from Google Chrome and Safari so you can see exactly what I’m talking about!

Google Chrome Screenshot: http://postimg.org/image/o7iyreldn/
Safari Screenshot: http://postimg.org/image/91otc5bol/
Website Link: http://snapnbak.com/

Thanks so much for you time!

-Ryan


#4

Hi
Did you mean that you want to remove the footer credits? you can hide it using this code below:
.site-footer{ display: none; }

And about the different fonts on browser, I think you are using your own code?
I am check your site using chrome dev tools and found this: http://prntscr.com/8o7xjs There is an invalid css code (in the red box), please try remove the single quotation mark.


#5

Hey thanks so much. I have fixed the browser issue and removed the footer credits.

Although, I would like the bottom of my website to end where the solid black line all the way across ends after my social media widgets. I don’t want my green, blue, white, and black background image to cut through again after my social media widgets black border ends.

Also, is there a way I can make the text size of my sub menu items smaller? I want my sub menu text to be smaller then my Menu text.

Website Screenshot: http://postimg.org/image/g1zwewn1r/

Website Link: http://snapnbak.com/

Thanks,

-Ryan


#6

Hi,

Image (green, blue, white) on the footer I think it is because there is padding on it, so the footer wrapper does not has full height. So, please try to add this css code to remove the bottom padding of the footer:

.footer-widgets {
    padding-top: 17px;
}

and here is to decrease the font size of the submenu:

#mainnav .sub-menu li a {
    font-size: 14px;
}

#7

Hi, so the font of the submenu is perfect now!

Although, the bottom of my website is still to large though. I think the footer widget area ends when the solid black border around the social media widgets ends. The part underneath is from my background image. Is there a css code that will let me chop of some of the bottom of my websites background image so the bottom of the website shortens? I’ll put a link below of my websites background image so you can see exactly what I mean.

Background Image: http://postimg.org/image/zdvbq3c37/
Website Link: http://snapnbak.com

Also, can I have a css code to change the font size of the footer widget title?

Thanks again,

-Ryan


#8

Ok, for footer area, please try to use these css code:

.footer-widgets {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer-widgets .widget {
    margin: 0 !important;
}

And here is for the font size of the footer title:

.footer-widgets .widget-title {
    font-size: 14px;
}