[Resolved] Magazine Grid – Dispatch. Editing the writing/gradient for responsiveness

Home › Forums › Support › Magazine Grid – Dispatch. Editing the writing/gradient for responsiveness

This topic contains 9 replies, has 2 voices, and was last updated by  David 1 month, 4 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 29, 2020 at 6:16 am #1218339

    James

    Hi guys, I’ve been messing about with the css for the magazine grid so that I can alter the gradient and alter the position of the header, but they seem to be interlinked and it just messes up for different viewports. I’ve tried messing around with different media queries with the following code:

    .wpsp-card .wpsp-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30% 3%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(60%, rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0,) 100%
  );
  pointer-events: none;

    I would like to have a dark gradient covering each post on the grid, but with the writing to remain in a uniform place on each viewport, landscape or portrait. I would like to achieve this without using several media queries, article:nthchild queries, or at least know if that’s the only way to do it!

    March 29, 2020 at 6:37 am #1218358

    James

    Looks like I’ve figured this out now:
    I do have to use media queries and am using vh padding units rather than px or %.

    March 29, 2020 at 7:53 am #1218559

    David Customer Support

    Did you resolve the gradient as well?
    You simply need to replace the background: -webkit-gradient and background: linear-gradient properties.

    This site is good for creating the gradient properties:

    https://cssgradient.io

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    March 29, 2020 at 8:49 am #1218608

    James

    Hi David, yes I did. I used the following code. Clunky, but it kind of gets the job done for now! Any advice how I might clean it up for future reference would be great!

    /*CONTENT WRAP - NATIVE VIEW*/
@media (max-width: 414px) { .wpsp-card .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 20vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;

}
}
@media (min-width: 414px) and (max-width: 768px){ .wpsp-card .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: -1vh;
	padding: 17vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}
@media (min-width: 769px) and (max-width: 1023px) { .wpsp-card .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: -1vh;
	padding: 13vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}
@media (min-width: 1024px) and (max-width:1180px) { .wpsp-card article:nth-child(1) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 28.5vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}
@media (min-width: 1024px) and (max-width:1180px) { .wpsp-card article:nth-child(2) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 10vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1024px) and (max-width:1180px) { .wpsp-card article:nth-child(n+3) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 10vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1181px) and (max-width:1440px) { .wpsp-card article:nth-child(1) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 40vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}
@media (min-width: 1181px) and (max-width:1440px) { .wpsp-card article:nth-child(2) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 17vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}
@media (min-width: 1181px) and (max-width:1440px) { .wpsp-card article:nth-child(n+3) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 16vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
}
}

@media (min-width: 1441px) and (max-width: 1920px){ .wpsp-card article:nth-child(1) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 30vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1441px) and (max-width: 1920px){ .wpsp-card article:nth-child(2) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 13vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1441px) and (max-width: 1920px){ .wpsp-card article:nth-child(n+3) .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 13vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1921px){ .wpsp-card article:nth-child(1)  .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 18.7vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 1921px){ .wpsp-card article:nth-child(2)  .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 7vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}

/*CONTENT WRAP - NON-NATIVE VIEW which is landscape on phones/tablets and portrait on laptops*/
@media (min-width: 320px) and (max-width: 896px) and (orientation: landscape){ .wpsp-card .wpsp-content-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 40vh 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
@media (min-width: 897)and (max-width: 1112px) and (orientation: landscape){ .wpsp-card .wpsp-content-wrap {
	position: relative;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	padding: 3%;
	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.3) !important;
		background: -webkit-gradient(linear-gradient, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 100%);
		pointer-events: none;
	}
}
    March 29, 2020 at 8:52 am #1218611

    David Customer Support

    Thats a lot of media queries 🙂
    Glad you got it resolved.

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    March 29, 2020 at 2:23 pm #1218890

    James

    I know right! Surely I did something wrong but I’m only an amateur!
    Thanks

    March 30, 2020 at 3:56 pm #1220155

    James

    Hi there, just coming back to this. So I deleted all of those media queries, since the original code was perfectly responsive anyway. What I’d like to know now is how I can fully cover the .wpsp-card .wpsp-content-wrap with the darker gradient (so the writing is clearer) without the meta moving too.

    The meta seems to be inextricably connected to the height of the gradient..
    I also find that I have to use an !important in order to change the background color opacity.

    .wpsp-card .wpsp-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5% 8%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.9) !important;
  
	background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(30%, rgba(80, 50, 50, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
	
	
  background: linear-gradient(
    0deg,
    rgba(80, 50, 50, 0.5) 30%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none
    March 31, 2020 at 1:51 am #1220455

    David Customer Support

    Aah – i must admit i wasn’t sure what they were in aid of 🙂
    Yeah the gradient is the background to the content-wrap element, so it ‘scales’ with the content.

    So in the above CSS remove the background-color and 2 x background CSS properties.
    And then lets create a psuedo element to cover the entire card with a gradient background by adding this CSS:

    .wpsp-card .wp-show-posts-image {
    position: relative;
}

.wpsp-card .wp-show-posts-image:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
}

    Then its just a matter of adjusting the linear gradient to suit.

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

    March 31, 2020 at 4:52 am #1220596

    James

    Cheers David…

    March 31, 2020 at 5:19 am #1220615

    David Customer Support

    You’re welcome

    Documentation: http://docs.generatepress.com/
    Adding CSS: http://docs.generatepress.com/article/adding-css/

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.