css help – thanks!

  • Unknown's avatar
    moshekahol · Member ·

    Hi I used some css code on this page:
    https://kahol.co.il/%D7%97%D7%A0%D7%95%D7%AA/
    and I dont know yet how to make this chages that I want:
    1. making the page full – so the cards will be in full width
    2. removing the space under the cards – which I dont know how it even came to be…

    hope someone can help me with this :) thanks!

    here is the code:

    /* store */
.products-main {
	max-width: 1200px;
	margin: auto;
	display: block;
}

.products-wrap {
	background: #f2f2f2;
	display: block;
	padding: 0;
}

.products {
	align-content: flex-start;
	display: flex;
	flex-flow: row wrap;
	max-width: 100%;
	overflow: hidden;
	padding: 0;
}

.product {
	background: none repeat scroll 0 0 #fff;
	color: #444;
	border-radius: 3px;
	display: block;
	height: 350px;
	line-height: 1.62;
	margin: 10px;
	padding: 0;
	text-align: center;
	text-decoration: none;
	-webkit-transition: .2s all ease-in-out;
	-moz-transition: .2s all ease-in-out;
	-ms-transition: .2s all ease-in-out;
	-o-transition: .2s all ease-in-out;
	transition: .2s all ease-in-out;
	border-radius: 3px;
	box-shadow: 0 4px 8px -2px rgba(0,0,0,.1);
	color: rgba(55,70,72,.8);
	text-align: center;
	cursor: pointer;
}

.product:hover {
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	transform: translateY(-2px);
	text-decoration: none;
	box-shadow: 0 16px 25px -10px rgba(0,0,0,.15);
	cursor: pointer;
}

.top-right-corner {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	background-color: #50D2C2;
	color: white;
	width: 135px;
	float: right;
}

.product {
	flex-basis: 54%;
	flex-grow: 0;
	align-items: center;
}

.product.w2 {
	flex-basis: 38.19%;
	flex-grow: 1;
}

.product.w3 {
	flex-basis: 61.8%;
	flex-grow: 1;
}

.product-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.product-inner > .taller {
	height: 61.81%;
	display: flex;
/* establish flex container */
	align-items: center;
	justify-content: center;
}

.product-inner > .shorter {
	height: 38.19%;
	display: flex;
/* establish flex container */
	align-items: center;
	justify-content: center;
}

.product-inner > .wider {
	width: 61.81%;
	display: flex;
/* establish flex container */
	align-items: center;
	justify-content: center;
}

.product-inner > .thinner {
	width: 38.19%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: white;
	margin: 0;
}

.caption {
	position: relative;
	top: 85%;
}

.product.hero {
	flex-basis: 100%;
	order: -1;
}

@media screen {
	.product {
		background: none repeat scroll 0 0 #fff;
		border-radius: 3px;
		display: block;
		height: 200px;
		line-height: 150%;
		margin: 5px;
		text-align: center;
		text-decoration: none;
	}
}

.page-id-3247 #secondary.widget-area {
	display: none !important;
}

    here is the html:

    <div class="products-main">
			<div class="products-wrap">
				<div class="products">
          <a class="product w2" href="#">
          <div class="product-inner">
            <div class="wider">
              <div>
            <h3>.w2 for a staffpick</h3>
              </div>
            </div>
            <div class="thinner" style="background-image:url('http://ecx.images-amazon.com/images/I/31aktkh55%2BL.jpg');">
                                      <div class="top-right-corner">From $499</div>
            </div>
            </div>
          </a>
					<a class="product" href="#">
      <div class="product-inner">
            <div class="wider">
              <div>
            <h3>.w3 for a featured</h3>
              </div>
            </div>
            <div class="thinner" style="background-image:url('http://ecx.images-amazon.com/images/I/31aktkh55%2BL.jpg');">
                        <div class="top-right-corner">From $499</div>
            </div>
            </div>
          </a>
        <a class="product hero" href="#">
            <div class="product-inner">
            <div class="wider">
              <div>
            <h1>.hero class pins card to top</h1>
              </div>
            </div>
            <div class="thinner" style="background-image:url('http://ecx.images-amazon.com/images/I/31aktkh55%2BL.jpg');">
            </div>
            </div>
          </a>
				</div>
			</div>
		</div>

    help will be very appreciated!

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

  • Unknown's avatar
    moshekahol · Member ·

    Hi, I managed to add this:

    .page-id-3247
p {
	display: none;
}

    it solved the problem of the space on the buttom although I dont know why I needed it – there where no paragraphs I wrote…

    2. the second problem: one of the “buttons” – a blure square is out of place – its not on the cards but on the top right of the page – I will be happy if someone know what to do to remove that button on the top right and leave only the buttons on the cards..
    thanks!

  • Unknown's avatar
    siobhyb · Member ·

    @moshekahol: Did you manage to resolve this issue? I’m not seeing a blue square in the top right of the following page:

    https://kahol.co.il/%D7%97%D7%A0%D7%95%D7%AA/

    If you’re still seeing the square please point me to the area/page it’s displaying on.

  • The topic ‘css help – thanks!’ is closed to new replies.