Jump to content

Archived

This topic is now archived and is closed to further replies.

dbrowne02

trying to remove padding from quickslider

Recommended Posts

dbrowne02+    1
dbrowne02

Hi, I am trying to remove padding from quickslider so that it lines up with contact form on this page and other pages throughout the site that have this layout. This initially worked, but then stopped working

 

Created this in custom css

 

body .pl-area .pl-section {
.pl-section-pad
.paddingrotatingpics {
.pl-section-pad {
      padding-right: 0px;
      padding-left: 0px;
}
}
  }
 
I then added paddingrotatingpics to the Custom Styling Classes  for quickslider on each page that has that layout.
 
It worked initially, but is no longer working.
 
 
Thanks for any ideas you may have!
 

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hi There 

 

You have the right idea but the code may be wrong. 

 

Remove what you have (and back up the code so you do not lose it) 

.section-quickslider .pl-section-pad {
padding: 8px 0;
}

this should work for all Quicksliders

 

This should give this effect http://screencast.com/t/JTaZRZNYj


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Hi Martin,

 

Thank you for your reply, really appreciate it. I added that code to custom css. I also got rid of the paddingrotatingpics custom css. The quickslider still doesn't line up perfectly with the contact us box below. I am trying to get rid of the side padding. Unfortunately, it still doesn't work. If you inspect element on this page http://www.selborneproperties.com/about/ ,  you will find that your custom css is being overridden by this code  body .pl-area .pl-section .pl-section > .pl-section-pad {

  1. padding8px;
  2. margin-bottom1em;
}
 

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

I think my solution, posted above, ran into the same override...

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

You can see from my screenshot this does work - Can you try running all your Custom Code through the validator here http://jigsaw.w3.org/css-validator/

 

You will need to correct any issues the validator returns for your code. 

 

Please feel free to post your results 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Hi Martin, 

 

Thanks. Here are the results that I got. 

 

 

187 .my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 188 .my-boxshadow-area Parse Error } 201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 202 body .pl-area .pl-section Parse Error } 210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 211 body .pl-area .pl-section Parse Error }

 

 

I took CSS stuff out, and now the quickslider is the correct width. 

 

However, I lost some of the styling that I had from that code. For example, that boxshadow gave my contact form a border. I am not understanding why there were parse errors with this code. Do you have any ideas? Thanks so much for your help. Here is the code that corresponds with the parse errors--

 

/* boxshadow */

.my-boxshadow-area{

    .box-shadow(0 15px 60px black);

}

 

body .pl-area .pl-section {

.pl-section-pad

.paddingrightleft {

.pl-section-pad {

      padding-right: 40px;

}

}

  }

 

body .pl-area .pl-section {

.pl-section-pad

.nopaddingbottom {

.pl-section-pad {

margin-bottom: 0px;

      padding-bottom: 0px;

      padding-top: 13px;

}

}

  }

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

You need to fix each parse error otherwise your CSS wil not work to some extent

 

.my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 

188 .my-boxshadow-area Parse Error } 

201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 

202 body .pl-area .pl-section Parse Error } 

210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 

211 body .pl-area .pl-section Parse Error }

 

All these lines need correcting. Your code is malformed. 

 

 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Take ALL of your Custom CSS and place your code in the pastebin and then share the link and i will take a look. 

 

Pastebin is here http://forum.pagelines.com/pst/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Hi Martin,

 

Thank you for your help with this. I posted all original code in the pastebin. Here is the link.

 

http://forum.pagelines.com/pst/p/103-ttxhff/

 

Please note that I deleted the following code after seeing the parse errors. I'd love to get /* boxshadow */ back in there but that code seemed to have an error --

 

/* boxshadow */

.my-boxshadow-area{

    .box-shadow(0 15px 60px black);

}

 

body .pl-area .pl-section {

.pl-section-pad

.paddingrightleft {

.pl-section-pad {

      padding-right: 40px;

}

}

  }

 

body .pl-area .pl-section {

.pl-section-pad

.nopaddingbottom {

.pl-section-pad {

margin-bottom: 0px;

      padding-bottom: 0px;

      padding-top: 13px;

}

}

  }

Share this post


Link to post
Share on other sites
dbrowne02+    1
dbrowne02

Hi, I am not sure I received a reply to my last post. I am hoping I can get some help with this....

Thanks!

--David

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

You need to fix the CSS errors in your 'paste-binned' CSS first 

 

The validator produced the following errors to start with (the validator may produce more once these are in fact corrected) 

 

Sorry! We found the following errors (6)
URI : TextArea 187 .my-boxshadow-area Parse Error .box-shadow(0 15px 60px black); 188 .my-boxshadow-area Parse Error } 201 body .pl-area .pl-section Parse Error .pl-section-pad .nopaddingbottom { .pl-section-pad { margin-bottom: 0px; padding-bottom: 0px; padding-top: 13px; } } 202 body .pl-area .pl-section Parse Error } 210 body .pl-area .pl-section Parse Error .pl-section-pad .paddingrightleft { .pl-section-pad { padding-right: 40px; } } 211 body .pl-area .pl-section Parse Error }
 

 

so 

/* boxshadow */
.my-boxshadow-area{
    .box-shadow(0 15px 60px black);
}

Your box shadow CSS should be more like this in structure 

div
{
box-shadow: 10px 10px 5px #888888;
}

remove the . and the  ( ) and restructure to be more like this 

/* boxshadow */
.my-boxshadow-area{
    box-shadow: 0 15px 60px 000000;
}

on lines 200 & 209 just remove the extra brackets }


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • triggerfish
      By triggerfish+
      I am stumped here, The Mega menu drop down menus are going under the Quickslider.
      I have tried the Z-index with no luck..any ideas here would be greatly appreciated.
      http://randbplumbing.ca/slider-test-3/
       
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

×