Docs

[Vincent]

Hi!

So here is my problem:

I have the following CSS in order to make my blog text more “centered”:

body.blog .entry-wrap, body.single .entry-wrap {
    padding-left: 200px;
    padding-right: 200px;
}

This affects the recent posts as they use the div class “entry-wrap”. How can I change the CSS and/or the class itself of the DIV which holds the recent posts shortcode?

Here is the whole CSS

code{
color:#FFFFFF ;
background-color:#000000;
font-weight:600;
}
p.intro {
	 font-size: 1.368em;
	 padding: 1.154em;
	 text-align: center;
	 line-height: 1.5em;
	 margin: 1.038em 0px;
	 font-weight: 600;
	 font-style: normal;
	 color:#000000;
}
p.blogauthor{
text-align: center;
}
.single-post .entry-featured {
     display:none;
}
.single-post .entry-title {
     display:none;
}
.single-post .x-header-landmark {
     display:none;
}
.single-post h1 {

text-align:center; 

}
.blog .entry-featured {
display:none; !important
}
.archive .entry-featured {
display:none; !important
}
.search .entry-featured {
 display:none; !important
}
.x-recent-posts .x-recent-posts-date {
    display:none;
}
a.x-btn-navbar-search:before {
    content: "SÖK";
    padding: 3px;
}
.x-recent-posts-img {
display:inital; !important
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 5px;
  padding-right: 5px;
  text-align: justify; 
}
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 8px;
  padding-right: 8px;
  text-align: justify;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 200px;
  padding-right: 200px;
}
}
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 200px;
  padding-right: 200px;
}
}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 200px;
  padding-right: 200px;
}
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 200px;
  padding-right: 200px;
}
}
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 200px;
  padding-right: 200px;
}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body.blog .entry-wrap,
body.single .entry-wrap {
  padding-left: 5px;
  padding-right: 5px;
  text-align: justify;
}
}
@media (max-width:480px){

h1,.h1{
font-size:1.7em;
}
h2,.h2{
font-size:22px;
}
h3,.h3{
font-size:20px;
}
h4,.h4{
font-size:18px;
}
h5,.h5{
font-size:16px;
}
h6,.h6{
font-size:16px;
}
}
@media (max-width:768px){

h1,.h1{
font-size:2.2em;
}
h2,.h2{
font-size:22px;
}
h3,.h3{
font-size:20px;
}
h4,.h4{
font-size:18px;
}
h5,.h5{
font-size:16px;
}
h6,.h6{
font-size:16px;
}
}

The login and link will be posted in a seperate post. Thanks for your time and input!

/V

[Vincent]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

@media only screen and (min-width: 1224px){
body.blog .entry-wrap, body.single .entry-wrap .entry-content {
    padding-left: 200px;
    padding-right: 200px;
}
}

Hope it helps.

[Vincent]

Works! Thx.

/V

[Lely]

You’re welcome Vincent!

Cheers!

[Author]

Posts