8k8 com download for android.REGISTER NOW GET FREE 888 PESOS REWARDS!

Resolved

(@chloeponee)

Hi,

I made a lot of changes to the layout of my homepage using custom CSS. For example, I added flex in some areas, and set the sidebar to reverse so it sits in the left hand side.

However, now I messed up all the pages of my website that use the ‘masonry’ layout, such as https://test01.mug-cakes.nl/recepten/alle-recepten/ and https://test01.mug-cakes.nl/recepten/alle-recepten/hartig/ .

I think it’s the .isotope-masonry-layout class I need to target.

Any ideas? Or is there no way to have both the homepage and other pages display as I want, because they use the same classes?

Here is all the custom code I added so far:

/*Custom fonts */

@font-face {
  font-family: "Passion-To-Action";
	src: local("passiontoaction");
  src: url('/wp-content/uploads/fonts/passiontoaction.otf') format("opentype");  
}

@font-face {
	font-family: 'Poppins';  
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Regular.otf') format('otf'), font-weight: 400, font-style: normal;
	
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Light.otf') format('otf'), font-weight: 200, font-style: normal;
	
	src: url('public_html/wp-content/themes/ChloeCake/enoki/fonts/Poppins-Medium.otf') format('otf'), font-weight: 600, font-style: normal;
	
}

/*Custom fonts end*/

/*Font styling*/
p a {
	text-decoration: underline;
}

h4 {
    font-weight: normal;
    font-style: normal;
    font-family: "Passion-To-Action";
}

h5, h6 {
    font-weight: bold;
    font-style: normal;
		font-size: 0.8rem;
    font-family: "Source Sans Pro";
}

h1, h2, h3 {
    font-weight: normal;
    font-style: normal;
    font-family: "Passion-To-Action";
}

p {
	font-family: poppins;
	font-weight: 400;
	font-size: 14px;
	
}

p em, p i{
	font-family: poppins;
		font-size: 14px;
}

p b, p strong {
	font-family: poppins;
	font-weight: 600;
		font-size: 14px;
}

.nav a, .header-area .wrapper ul li a, .pre-header-area .wrapper ul li a {
    font-family: 'droid_serifregular';
    font-weight: normal;
    font-style: normal;
    font-family: "Passion-To-Action";
    font-size:26px;
}

body p{
	font-family: poppins!important;
	font-size: 14px;
	font-weight: 400px;
	color: #2C222E;
}

.is-boxed {
	font-family: poppins!important;
	font-weight: 400px;
	font-style: normal;
	font-size: 12px;
}

/*Font styling end*/


.isotope-masonry-layout{
	background-color: red;
}



/*Newsletter form*/
#mc_embed_signup {
	background-color: #fff1ee;
	padding: 5px;
	}

#mc_embed_signup input {
	font-family: poppins!important;
	font-weight: 400;
	font-size: 12px;
	color: #382B3B;
	}

#mc_embed_signup .button{
	font-family: poppins!important;
	font-weight: 600;
	font-size: 14px;
	
}

#mc_embed_signup .button:hover{
	background-color: #FF85B1!important;
}

/*Newsletter form end*/

/*Social icons in posts*/
.fa{
	
  font-size: 15px;
  width: 15px;
  text-align: center;
  text-decoration: none;
}

.fa:hover{
	
  font-size: 18px;
  width: 15px;
	color: #FF85B1;
}
/*End social icons in posts*/

/*Posts*/
.is-boxed .inner-wrapper{
	margin: 0px;
}
/*posts end*/


/*Categorie links*/
p.has-background{
	padding: 0px!important;
}

/*Categorie links ends*/

/*Search widget*/
.element-block-search{
	background-color: #fff1ee!important;
	height: auto!important;
	display: flex!important;
	flex-direction: column!important;
	justify-content: flex-end!important;
	padding-top: 10px!important;
	align-items:center!important;
}

.element-block-search .inner-wrapper{
	margin-bottom: 40px;
	
}

.element-block-search{
	color: #FFF1EE;
}
/*Search widget end*/


/*footer search bar*/
.hero-search-feature p{
	font-family: poppins;
	
	font-size: 14px;
}

.hero-search-form-container{
	  padding: 7px!important;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    border: 2px solid #ffd0d0;
   
	background-color: white;
}

.hero-search-form{
	background-color: white;
	padding: 0px;
}

.hero-search-form input[type="text"]{
	font-family: poppins!important;
	font-weight: 400;
	font-size: 12px;
	}

.hero-search-form .btn{
	color: white;
	font-family: poppins!important;
		}

.hero-search-feature{
	margin: 0px;
}

.btn, input[type=button], input[type=submit], button{
	background-color: #FF3781!important;
}

/*footer search bar end*/

/*custom classes*/

 /*Werkt niet*/

@media (max-width: 767px) {
        .hidden-mobile {
          display: none;
        }
      }


/*Logo*/
.logo img{
	margin-top: -5px;
	max-width: 85%;
}

.sidebar .logo{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
} 

/*Logo end*/

/*Category thumbnails*/

.categorieLink{
	font-family: passion-to-action!important;
	font-size: 20px;
	text-decoration: none!important;
	}

/*Category thumbnails end*/

/*custom classes end*/

.wp-block-media-text{
	  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}



.post-header-container, .post-header-container .nav li ul {
background-color: #ffffff;
}

.nav li {
color: #CA7DF9;
}

.btn {
background-color: #CA7DF9;
}

.post-footer-container {
    background: #47b29b;
}

.header-container ul li, .header-container ul.nav > li > a, .header-container .header_text{
	color: #FF3781;
	}

.header-container ul li, .header-container ul.nav > li > a:hover, .header-container .header_text{
	color: #47b29b;
	}

.pagination.is-loadmore ul li:first-child{
	background-color: #FF3781;
	font-family: poppins;
	font-size: 1em;
	
}

.post-footer-container *{
	font-family: passion-to-action;
	font-size: 18px;
}

.post-footer-container a{
	font-family: passion-to-action;
	font-size: 14px!important;
	color: #ffffff;
}

.post-footer-container a:hover{
	font-family: passion-to-action;
	font-size: 18px!important;
	color: #ffffff;
}

.comment-count{
	background-color: #ffffff;
	color: #47b29b;;
}

.comment-count .fa{
	color: #47b29b;
}

.postMeta *{
	color: #47b29b;
}



.main-column .read-more{
	color: #FF3781;
}

.main-column .read-more:hover{
	color: #FF85B1;
}

.postMeta .embelish{
	color: #ffffff;
}

.style-sep:after {
	color: white!important;
}

/*main menu*/

.sticky-header-wrapper {
	text-align: center;
}

.sticky-header-wrapper .nav ul li{
background-color: #ffffff;
	
	color: #47b29b;
}

.sticky-header-wrapper .nav ul li a{
	color: #FF3781;
}

.sticky-header-wrapper .nav ul li a:hover{
	color: #47b29b;
}
/*main menu end*/

#sidr-main *{
	color: #FF3781;
}
#sidr-main *:hover{
	color: #47b29b;
}

#sidr-main ul, #sidr-main li{
	border-color: #fff1ee!important;
}

.mobile-header a.responsive-menu-button{
	font-family: passion-to-action;
	color: #FF3781;
	font-size: 2em;
}

.mobile-header a.responsive-menu-button em{
	font-size: 1em;
	color: #FF3781;
}

.wp-block-search__inside-wrapper{
    display: flex;
    flex: auto;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.wp-block-search__label{
	font-family: passion-to-action;
	font-size: 20px;
	text-align: center;
	padding: 10px;
}

input[type=search] {
	font-family: poppins;
	font-size: 12px;
	color: #BFACC3;
	margin-top: 13px;
}

.wp-block-search__button{
	color: white;
	background-color: #FF3781!important;
	width: 20%;
	}

.wp-block-search__button:hover {
	color: white;
	background-color: #47b29b!important;
	width: 20%;
	}

.wp-block-search__button.has-icon{
	display: flex;
	}

.not-full.outter-wrapper.page-content{
	display: flex;
	flex-direction: row-reverse;
	padding-top: 18px;
}

.is-sidebar .main-column{
	    width: 60%;
    margin-left: 1%;
    float: right;
}

.is-sidebar aside.sidebar{
	    width: 40%;
    margin-right: 3%;
    /* padding-left: 3%; */
    float: left;
    height: auto;
    /* position: relative; */
    margin-top: 5px;
    margin-bottom: 25px;
	
}

aside.sidebar .widget{
	margin-bottom: 40px;

}

.is-sidebar aside.sidebar:before {
    border: none;
}

.is-sidebar aside.sidebar {
    border-right: 2px solid white;
    padding-right: 4%;
}

.embelish{
	opacity: 0%;
}


/*Mobile classes*/

@media screen and (max-width: 760px) {
     .header-container, .header-container .nav li ul {
        height: 70px;
			  margin: auto;
			 padding-top: 5px;
  			width: 25%;
    }
	
	.not-full.outter-wrapper, .is-full .inner-wrapper, .sticky-header-wrapper .wrapper, footer .wrapper, .archive-header, .hero-widgets-inner{
		width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
	}
	
	.not-full.outter-wrapper.page-content{
	display: flex;
	flex-direction: column-reverse;
	    width: 100%;
    margin: 0 auto;
   
    padding-right: 20px;
    padding-left: 20px;
		align-items: center;
	}
	
	.is-sidebar aside.sidebar {
    border-right: none;
    padding-right: none;
}
	
	.header-container, .header-container .nav li ul
	{
		  height: auto;
      margin-bottom: 8px;
    width: 100%;
		
	}
	
	.sticky_placeholder{
		height: 100%!important;
	}
	
	.is-sidebar .main-column {
		width: 100%!important;
		margin-left: 0px;
	}
		
	.is-sidebar aside.sidebar{
		width: 95%;
		margin: 0px;
	}
	
	aside.sidebar .widget:last-child{
		margin-bottom: 0px;
	}
	
	#block-47{
		display: none;
	}
	
	#block-51{
		display: none;
	}
	
	#block-53{
		display: none;
	}
	
	
}
/*Mobile classes end*/

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Supratim Chatterjee
(@papai40515)

1 year, 8 months ago

I think you messed the grid system. How was it before messing up ? https://nimb.ws/kfTeZM was it like this one ?

Thread Starter chloeponee
(@chloeponee)

1 year, 8 months ago

this is my old website and how the layout was before: https://www.mug-cakes.nl

Moderator bcworkz
(@bcworkz)

1 year, 8 months ago

is there no way to have both the homepage and other pages display as I want, because they use the same classes?

Theme dependent, but every page typically has various body tag classes you can use to target specific kinds of pages. Include these in your CSS selectors to limit the CSS to pages with those body tag classes.

For example, to make all H1 titles larger only on the home page:
.home h1 { font-size: 3rem; }

You could target all archive pages with .archive. All single pages with .single. Every single post page also has its own unique body class, for example .postid-2728

This doesn’t help you repair the layout, but you can at least limit your CSS application to a specific page.

Thread Starter chloeponee
(@chloeponee)

1 year, 8 months ago

That did the trick, thank you! I didn’t know you could target individual pages that way. Cheers!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Broken layout’ is closed to new replies.

Broken layout

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics