How to change image sizes for each panel for PIQUE theme

• 

  koleenrigor · Member · Sep 25, 2016 at 12:30 pm

  • Copy link
  • Add topic to favorites

  I want to customize the images/videos I place on each panel. If I change the size or padding in css all media in all panels are changing as well. How to call out each panel?

  Thank in advance!

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

• 

  hallluke · Member · Sep 25, 2016 at 12:49 pm

  • Copy link

  The top one has an ID of pique-hero and the following ones have classes of pique-panel1, pique-panel2, etc. so you can use those to target texts or images or whatever you like in each specific panel without messing with the others.

• 

  koleenrigor · Member · Sep 25, 2016 at 12:52 pm

  • Copy link

  Hi Halluke,

  Thank you so much for the immediate response! Can you maybe give me an example? Will be so much appreciated :)

• 

  koleenrigor · Member · Sep 25, 2016 at 12:55 pm

  • Copy link

  I’m actually trying to edit the Our Process panel.

• 

  hallluke · Member · Sep 25, 2016 at 1:02 pm

  • Copy link

  Your site is set to private so I can’t give you any specific code to try for your site unless you change your privacy settings or invite me to be a viewer.

  Can you also let me know exactly what you’re trying to change and how you want it to look. It would be good to see the code you’ve already tried that didn’t work so I have somewhere to start from.

• 

  koleenrigor · Member · Sep 25, 2016 at 1:08 pm

  • Copy link

  I set it to public now. Please see Our Process panel.

  Thank you!!

• 

  hallluke · Member · Sep 25, 2016 at 6:10 pm

  • Copy link

  Did you turn this off again? The site whiteboardanimation.ae is still private.

• 

  koleenrigor · Member · Sep 25, 2016 at 6:15 pm

  • Copy link

  Please see again, thank you!

• 

  hallluke · Member · Sep 25, 2016 at 6:19 pm

  • Copy link

  I see you have some custom code targeting the panels already. What exactly are you trying to change?

• 

  koleenrigor · Member · Sep 25, 2016 at 6:20 pm

  • Copy link

  I want to change the position of the contents (video, image) in each panel.

• 

  hallluke · Member · Sep 25, 2016 at 6:22 pm

  • Copy link

  I understand that but what specifically do you want to change them to? Without some more specific information about how you’d like it to look I can only offer vague advice.

• 

  koleenrigor · Member · Sep 25, 2016 at 6:24 pm

  • Copy link

  I want to make the video bigger and keep it centered while the contact form I want to move it more left and the Our process grid centered.

  Thanks again!

• 

  hallluke · Member · Sep 25, 2016 at 6:36 pm

  • Copy link

  You can fix the centring problem on the contact form and “Our Process” section by removing the left-padding you’ve applied to all of the panel headers and content areas. You’ll then also need to remove the right-padding on the h2 elements to make sure the titles appear centred.

  Then the only thing not centred is the video which can be done with:

  .embed-wistiainc div {
  	margin: 0 auto;
  }

  I’m afraid I’m not sure how to make the video larger.

• 

  koleenrigor · Member · Sep 25, 2016 at 6:39 pm

  • Copy link

  And how do call out the content of panel 1 and 2 and 3?
  That’s actually what I really want to know.

  The content of Our Process isn’t centered as well.

  Thanks!

• 

  hallluke · Member · Sep 25, 2016 at 6:45 pm

  • Copy link

  That section isn’t centred because you didn’t delete the code in your existing custom CSS like I suggested. Once you do that it will be OK.

  In .pique-panel .entry-header,.pique-panel .entry-content you need to delete the line:

  padding-left: 12em

  In .pique-panel-content h2 you need to delete:

  padding-right: 13.5rem

  To change the title in your first panel (Why WBA?) you would do something like this:

  .home .pique-panel1 .entry-title {
  	text-transform: lowercase;
  }

  and notice that none of the other panel titles are changed.