Instagram full width footer

• 

  theflowerwallnz · Member · Mar 15, 2017 at 9:10 am

  • Copy link
  • Add topic to favorites

  Hi guys,
  I’m using theme Goran and have premium account, so can use CSS if needed. Could someone please suggest if there is a way to change Instagram widget to be full width across the footer. At the moment no matter what I try it take just one third of it.

  Ideally I’d like my footer to look similar to this https://www.carlyrowena.com/search/label/Fashion

  Thanks
  Natalia!

  [Moderator’s note: moved to CSS Customization forum]

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

• 

  thesacredpath · Member · Mar 15, 2017 at 7:27 pm

  • Copy link

  Hi there, the following will make the Instagram widget full width.

  .footer-widget {
  	width: 100%
  }

  It becomes quite massive, so you may want to change the number of images and/or the number of columns (Customize > Widgets).

• 

  theflowerwallnz · Member · Mar 15, 2017 at 9:20 pm

  • Copy link

  Great, thank you so much!! It worked!

  Just another question … like you said images are quite large now, is there a way to increase number of columns? At the moment I only have an option of maximum 3.

  Thanks!
  Natalia

• 

  thesacredpath · Member · Mar 15, 2017 at 10:34 pm

  • Copy link

  Hmmm, I don’t remember that being limited to a maximum of three. I took a look at the CSS, and add the following to the bottom of your custom CSS and see what you think. I’ve limited this to screens/windows 1024px and wider with a Media Query as the images get very tiny when the screen is narrower than that.

  @media screen and (min-width: 1024px) {
  .widget_wpcom_instagram_widget img {
  	width: 16.6% !important;
  }
  }

• 

  theflowerwallnz · Member · Mar 15, 2017 at 10:53 pm

  • Copy link

  Thank you, this perfect, exactly what I needed.

  Thanks again!

• 

  thesacredpath · Member · Mar 16, 2017 at 12:41 am

  • Copy link

  Awesome, and you are welcome!

• 

  theflowerwallnz · Member · Mar 31, 2017 at 4:00 am

  • Copy link

  Hi again,

  Last time you helped me to fix my instagram feed footer. Now I changed my theme to Thefour and the old CSS and it does not seem to work any more. Would you mind helping me with this again please?!

  Ideally I’d like my footer to look similar to this https://www.carlyrowena.com/search/label/Fashion

  Thanks
  Natalia!

• 

  thesacredpath · Member · Mar 31, 2017 at 6:07 pm

  • Copy link

  Hi, the CSS for this theme is a bit different from the previous theme, but similar. This will give you 2 rows of 6 images at 1024px and wider, just as we did before, and below 1024px in width, things will go to three columns with 3 per row.

  @media screen and (min-width: 1024px) {
  .footer-widgets #wpcom_instagram_widget-21 {
  	width:100%;
  
  }
  .footer-widgets #wpcom_instagram_widget-21 img {
  	width: 14%;
  	margin-bottom: 20px;
  }
  }
  @media screen and (max-width: 1023px) {
  .footer-widgets #wpcom_instagram_widget-21 {
  	width:100%;
  }
  .footer-widgets #wpcom_instagram_widget-21 img {
  	width: 28%;
  	margin-bottom: 20px;
  }
  }

• 

  theflowerwallnz · Member · Mar 31, 2017 at 7:56 pm

  • Copy link

  You’re amazing thanks so much! it worked :)

  May I ask you to help me with something else?

  https://theflowerwallnz.com/our-flower-walls/ on this page I have to much white space, is there a way to shift images … to may be have two columns instead of one? It does not seem to work when I simply edit the page.

  And the very last question- on the front page I have a white space, assuming it’s for testimonials, is there a way to temporarily remove it?

  Sorry if it’s too many questions!!!
  Thanks again :)

• 

  thesacredpath · Member · Apr 2, 2017 at 7:44 pm

  • Copy link

  Hi, on the flower walls page, we can make things into two columns, and this will work on most browsers from the last few years, but in the case of Internet Explorer, they did not support this until IE11, so anyone on IE using 10 or older will not see this change. You will have to edit this page and take our all the empty paragraphs that you have in there (several) or the spacing will be off on things.

  @media screen and (min-width: 1024px) {
  	.page-id-3 .entry-content {
  		display: -webkit-flex;
  		display: -moz-flex;
  		display: flex;
  		-webkit-flex-direction: row;
  		-moz-flex-direction: row;
  		flex-direction: row;
  		-webkit-flex-wrap: wrap;
  		-moz-flex-wrap: wrap;
  		flex-wrap: wrap;
  		-webkit-justify-content: center;
  		-moz-justify-content: center;
  		justify-content: center;
  		box-sizing: border-box;
  	}
  	.page-id-3 .entry-content figure {
  		max-width: 48%;
  	}
  	.page-id-3 .entry-content .edit-link {
  		display: none;
  	}
  }

• 

  theflowerwallnz · Member · Apr 2, 2017 at 10:31 pm

  • Copy link

  Thank you so much! It worked just like you said on all browsers except Explorer. So thanks again for all your help!

  I know that I’ve asked so many questions already, but I have one very last question; and I was hoping you could help me with this one too:

  On the front page I have a white space, at first I thought it’s for testimonials, but it seems like it is somehow meant to be linked to another page I’d like to feature. I tried to make my https://theflowerwallnz.com/our-flower-walls/ page a child of that front page, did not seem to work…

• 

  thesacredpath · Member · Apr 3, 2017 at 7:48 pm

  • Copy link

  Hi there, the content for that section is set at Customize > Theme Options under Featured Page. Select the page you wish to display in that section from the dropdown there.

• 

  theflowerwallnz · Member · Apr 3, 2017 at 10:07 pm

  • Copy link

  Thank you :)

• 

  thesacredpath · Member · Apr 4, 2017 at 6:45 am

  • Copy link

  You are welcome.