Full-width Instagram Footer

• 

  leoceasar18 · Member · Feb 13, 2018 at 12:20 pm

  • Copy link
  • Add topic to favorites

  I’m planning to take VENI premium theme (venidemo.wordpress.com), but I do want to have a full-width instagram footer in this theme similar to Ippo (ippodemo.wordpress.com)

  is that possible through CSS?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 13, 2018 at 7:51 pm

  • Copy link

  Yes it is. Once you switch, let me know and I can work out the CSS for you.

• 

  leoceasar18 · Member · Feb 14, 2018 at 10:55 am

  • Copy link

  Aryt, I already applied the Veni theme on my site, and I have a number of concerns regarding this.

  1. Can we have a full-width Instagram footer similar to ippodemo.wordpress.com?

  2. The logo on our homepage in different resolutions is small. I’m trying to adjust it through CSS, but I can’t find the right codes to do it. I need to resize the logo so it will not be too small. Here are the images I photoshopped for reference. I need it to be something like these:

  https://blaineislostph.files.wordpress.com/2018/02/tablet-logo-size.jpg
  https://blaineislostph.files.wordpress.com/2018/02/phone-logo-size.jpg
  https://blaineislostph.files.wordpress.com/2018/02/desktop-logo-size.jpg

  Lastly,

  3. Since our logo is white, can we have a different logo for the posts page. The featured image for every post is not full-width unlike in the homepage. Is it possible to add a dark logo dedicated for the post pages?
  Here’s a photo I edited for reference. I need it to look like this:

  

  Thank you in advance for helping me out! :)

• 

  leoceasar18 · Member · Feb 14, 2018 at 11:03 am

  • Copy link

  4. Also, the body is also too tight in mobile platforms, can we also increase the width of the body, so the content will not look too tight in mobile?

  Thank you and happy valentines! :D

• 

  thesacredpath · Member · Feb 14, 2018 at 7:12 pm

  • Copy link

  Hi, I see you have Instragram and FB widgets in your footer widget area, the following widens both of those widget areas to full width, but the FB widget will not show as full width. This is because of the way that FB has done the code, and we can’t make the widget wider, or change anything about it for that matter. For the Instagram widget, you will likely want to edit that widget and change the number of columns and the number of images since with only two columns, the images are very large.

  For #1:

  .site-footer .col-lg-4.widget-area {
  	width: 100%;
  }

  For #2, see how this works for you.

  @media screen and (max-width: 1190px)  {
    .compact-navigation header.site-header .custom-logo, .compact-navigation header.site-header .retina-logo {
      max-width: 150px;
      margin-top: 30px;
    }
    .site-header > .container {
      padding-left: 0;
      margin-left: 40px;
    }
  }
  @media screen and (min-width: 1191px) {
    .compact-navigation header.site-header .custom-logo, .compact-navigation header.site-header .retina-logo {
      max-width: 200px;
      margin-top: 30px;
    }
    .site-header > .container {
      padding-left: 20px !important;;
    }
  }

  For #3, the following would change the logo for all but the home page on your site. I just grabbed an image out of your Media Library, but you can replace it with whatever you wish.

  body:not(.home) header.site-header .custom-logo-link {
    background: url('https://blaineislostph.files.wordpress.com/2018/01/cropped-sample-logo.png') no-repeat scroll left top / contain;
    display: block;
  }

• 

  thesacredpath · Member · Feb 14, 2018 at 7:16 pm

  • Copy link

  On #4, for mobile, we can reduce the left/right margins, but it is a good idea to keep a bit of whitespace to the left and the right of content for readability reasons. Too close and the eye has a harder time going from the end of one line to the beginning of the next.

  @media screen and (max-width: 768px) {
    .content-area {
      margin-left: 20px;
      margin-right: 20px;
    }
  }

• 

  leoceasar18 · Member · Feb 15, 2018 at 5:27 am

  • Copy link

  Great! Thank you for helping us out! :)

  I only have concern with #3, the code that you’ve provided looked like this:
  https://blaineislostph.files.wordpress.com/2018/02/overlapping-logos.jpg

  The original homepage white logo is overlapping with the dark logo. Is there a way wherein only the dark logo is showing for post and pages?

  Thank you :)

• 

  thesacredpath · Member · Feb 15, 2018 at 7:36 am

  • Copy link

  Oops, there was a second CSS rule that I apparently forgot to copy and paste above. For the logo, use this.

  body:not(.home) header.site-header .custom-logo-link {
    background: url('https://blaineislostph.files.wordpress.com/2018/01/cropped-sample-logo.png') no-repeat scroll left top / contain;
    display: block;
  }
  body:not(.home) header.site-header .custom-logo {
    visibility: hidden;
  }

• 

  leoceasar18 · Member · Feb 15, 2018 at 10:39 am

  • Copy link

  Thank you so much! We appreciate your support. Your great help means a lot to our blog. Thank you once again! :D

• 

  thesacredpath · Member · Feb 15, 2018 at 8:18 pm

  • Copy link

  You are welcome, and thanks. :)