Quantcast

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

free code help / direction

Mars_OMGMars_OMG Member EpicPosts: 2,848
.item figure {
  1. background-position: 50%;
  2. background-size: cover;
  3. background-repeat: no-repeat;
  4. padding-top: 56.90141%;
  5. position: relative;
  6. margin:0;
  7. margin-bottom: 10px;
  8. color: #fff;
}

the problem is that setting a margin 0 is setting all margins 0 and the bottom margin is ignored. instead of writting it  twice
just do 

margin: 0 0 10px 0; 

top 0 right 0 bottom 10px right 0

I think you are trying to get something like 

margin 5px 5px 10px 5px; 

very courious why ther eis a background image for that class, since the server  code should have a default if no image exists.
- abandoning social media could possibly save the world.  

Comments

  • Mars_OMGMars_OMG Member EpicPosts: 2,848
    edited February 20
    Trending bar should be top fixed in my opinion it looks weird that is slides up with the webite.
    .{ position : sticky; top :0 ;}

    there are a few things I see, element position in the z-index meaning that elements aren't quite in their natural order  or layer. 

    Position : fixed with margin : 0 auto; can't work  because I'm assuming the page itself isn't set to 100% ? it is bit confusing when look at the order of elements.

    the ad could be put on the last div before </body> set to fixed which takes it out of pages element and that header portion can be set to block to show the ad.  just an idea. 

    it would also fix that wonky scroll of the ad breaking. Also creat a png file with 100% transparency to create the clickable area for the ad. this would eliminate the need to chop  the big add and able to scale it along witht hte page in the @media ;
    - abandoning social media could possibly save the world.  

  • Mars_OMGMars_OMG Member EpicPosts: 2,848
    edited February 21
    Another major issue imho, is the website has img {} 3 or more times . Need to add a class to the img tag so it does not overwrite other tags. I beleive this is the core of the padding issue. 

    So like in the stylesheets that are attached, which is 3 or more , there's an img tag on all 3 style sheets and for some reason they are going to every imnage on the site.  This is adding extra margins , and this is why when looking at he css, someone tried to use margins instead of fixing something with a basic class.
    - abandoning social media could possibly save the world.  

  • Mars_OMGMars_OMG Member EpicPosts: 2,848
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto
    {
    width:100%;
    padding: 5px 5px 5px 30px;
    }
    - abandoning social media could possibly save the world.  

  • Mars_OMGMars_OMG Member EpicPosts: 2,848
    might help to create an onlick() event for the drop down menus so they don't open when a mouse accidently hits it .
    - abandoning social media could possibly save the world.  

  • Mars_OMGMars_OMG Member EpicPosts: 2,848
    Could try creating an inner shadow for the images in the news feed. Think just use
    box-shadow : -# -# -# rgba( 0,0,0,0.5)
    - abandoning social media could possibly save the world.  

Sign In or Register to comment.