psycholoogmarieke

do you see the shadow in photo 1? how can i remove that.

and in photo 2, the subpages dont have the green with gold background.

Maybe it has to do with my CSS?

/4 blokken op homepage breder, op mobiel smaller/
@media only screen and (max-width: 1024px) { guten-psy{ width: 100% }

.guten-psy{ width: 100% }
}
@media only screen and (min-width: 1025px) { guten-psy{ width: 155% }

.guten-psy{ width: 155% }
}

.guten-column.guten-eCMYTc > .sticky-wrapper > .guten-column-wrapper:before {
z-index: -1;
}

.guten-eCMYTc div.wpforms-container-full {
margin-left: 0;
}

.guten-column.guten-wnVitj > .sticky-wrapper > .guten-column-wrapper::before {
z-index: -1;
}

/** WPFORMS button color normaal **/
.wpforms-form button[type=submit] {
background-color: #1B4235 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
font-family: poppins;
text-transform: uppercase;
font-size: 18pt;
font-weight: 500;
letter-spacing: 1.8px;
}

/** WPFORMS button color hover **/

.wpforms-form button[type=submit]:hover {
background-color: #DDD28C
!important;
color: #ffff !important;
}

.wpforms-container { font-family: poppins;
font-size: 18pt;
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a i, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul li.menu-item-has-children > a i {
font-size: 30px;
}

.guten-column .guten-icon-box, .guten-column .guten-icon-box-wrapper {
height: 100%;
} wpforms-1605 {

width: 100%;
margin: var(--wp--preset--spacing--30);

}

/** menu mobiel kleiner en uitgevouwen**/
@media screen and (max-width: 1024px) {
.gutenverse-menu .sub-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}

.guten-nav-menu.guten-element.break-point-mobile .gutenverse-menu-wrapper {
    height: auto !important;
}

}

@media screen and (max-width: 780px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a > i {
display: none;
}
}

/** menu achtergrond enkel op mobiel en niet pc**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu {
padding: 8px!important;
}
.guten-nav-menu .gutenverse-menu-wrapper ul, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li > a {
line-height: normal!important;
}
}

/** randje om mobiele menu**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu.break-point-mobile .gutenverse-menu-wrapper .gutenverse-menu-container {
border: 1px solid #DDD28C;

}


/** achtergrond blogs weg thumbnail container**/

.guten-postblock .guten-postblock-content{
width: 100%;
height : 100%;
}
}

/** achtergrond smal net als beeld**/

section .guten-container>.guten-element.guten-column>.sticky-wrapper>.guten-column-wrapper>* {max-width: none;

}

/** lettertype mobiele menu**/

@media only screen and (max-width: 1024px) {
.added-menu .menu-item a{
font-family: poppins;
text-transform: uppercase;
font-size: 17pt;
font-weight: 500;
letter-spacing: 2px;
}
}

• This reply was modified 1 year, 4 months ago by psycholoogmarieke.

i tried with html block but cant seem to fix it. is there no CSS just for the typgraphy?

Hi, I have made this code but nothing chances.. Any idea why not?

@media screen and (max-width: 500px) {
.added-menu .menu-item a{
font-family: poppins;
text-transform: uppercase;
font-size: 16pt;
font-weight: 500;
letter-spacing: 2px;
}
}

Hi Gowinda, thank you for your reply. The issue is that when i change the typography, its also changing for desktop screen and not only for mobile screen. I can not give them seperate layout? Like for example 600 weight for the menu typography on mobile and 500 weight for desktop

and any idea why this image is not visible on mobile? https://www.psycholoogmarieke.nl/werkwijze-emdr/

https://ibb.co/42t4BJ0

Unfortunately that code is not working

hi, and why is this? it sonly on mobile by some pages on my website.

https://photos.app.goo.gl/wPhGrFkqMPVmmXkK7

• This reply was modified 1 year, 5 months ago by psycholoogmarieke.

thank you! i didnt know you can switch the sections in the left bar! problem solved ??

I cant bc it looks like this: https://ibb.co/g4y468R

changing the tumbnail container background is not changing unfortunately

<!-- wp:template-part {"slug":"header","theme":"zeever"} /-->

<!-- wp:gutenverse/section {"sticky":{"Desktop":false},"topSticky":{"Desktop":{"point":"0","unit":"px"}},"bottomSticky":{"Desktop":{"point":"0","unit":"px"}},"width":{"Desktop":1170},"elementId":"guten-oVnLob","background":{"type":"default","color":{"r":27,"g":66,"b":53,"a":1}},"margin":{"Desktop":{"unit":"px","dimension":{"right":""}},"Tablet":[],"Mobile":[]},"padding":{"Desktop":{"unit":"px","dimension":{"top":"100","bottom":"80"}},"Tablet":{"unit":"px","dimension":{"top":"80","right":"10","bottom":"80","left":"10"}},"Mobile":{"unit":"px","dimension":{"top":"40","bottom":"40"}}},"animation":{"type":{"Desktop":"none"}},"wrapColumn":{"Desktop":false,"Tablet":false,"Mobile":true}} -->

<div class="section-wrapper" data-id="oVnLob"><section class="wp-block-gutenverse-section guten-element guten-section guten-oVnLob layout-boxed align-stretch"><div class="guten-background-overlay"></div><div class="guten-shape-divider guten-shape-divider-top"></div><div class="guten-shape-divider guten-shape-divider-bottom"></div><div class="guten-container guten-column-gap-default"><!-- wp:gutenverse/column {"width":{"Desktop":100},"sticky":{"Desktop":false},"topSticky":{"Desktop":{"point":"0","unit":"px"}},"bottomSticky":{"Desktop":{"point":"0","unit":"px"}},"elementId":"guten-rBMcxH","verticalAlign":{"Desktop":"default"},"horizontalAlign":{"Desktop":"default"}} -->

<div class="wp-block-gutenverse-column guten-element guten-column guten-rBMcxH"><div class="guten-background-overlay"></div><div class="sticky-wrapper" data-id="rBMcxH"><div class="guten-column-wrapper"><!-- wp:gutenverse/heading {"elementId":"guten-pvkFAE","textAlign":{"Desktop":"center"},"color":{"type":"variable","id":"zeever-primary"},"typography":{"type":"variable","id":"h2-font"},"positioningType":{"Desktop":"default"}} -->

<h2 class="wp-block-gutenverse-heading guten-element guten-pvkFAE">Laat je inspireren</h2>

<!-- /wp:gutenverse/heading -->

<!-- wp:gutenverse/heading {"elementId":"guten-GKNHka","type":3,"textAlign":{"Desktop":"center"},"color":{"type":"variable","id":"GGO1PZ"},"typography":{"type":"variable","id":"h5-font"}} -->

<h3 class="wp-block-gutenverse-heading guten-element guten-GKNHka">lees mijn laatste berichten (ook op mijn instagram te lezen)</h3>

<!-- /wp:gutenverse/heading -->

<!-- wp:gutenverse/post-block {"elementId":"guten-dAStNb","numberPost":"6","column":{"Desktop":"3","Tablet":"2","Mobile":"1"},"readmoreText":"Lees meer","metaEnabled":false,"postblockType":"type-5","noContentText":"Geen inhoud","postItemBackground":{"type":"default","color":{"r":255,"g":255,"b":255,"a":1},"image":{"Desktop":{}}},"postItemMargin":{"Desktop":{}},"postItemPadding":{"Desktop":{}},"postItemBorder":{"radius":{"Desktop":{}},"all":{"type":"none","width":"1","color":{"type":"variable","id":"zeever-border"}}},"thumbnailWidth":{"Desktop":""},"thumbnailMargin":{"Desktop":{}},"thumbnailPadding":{"Desktop":{}},"thumbnailBorder":{"radius":{"Desktop":{}}},"thumbnailHeight":{"Desktop":"280"},"thumbnailRadius":{"Desktop":{}},"contentContainerBackground":{"type":"default","color":{"r":68,"g":128,"b":82,"a":1}},"contentMargin":{"Desktop":{},"Mobile":[]},"contentPadding":{"Desktop":{"unit":"px","dimension":{"top":"40","right":"40","bottom":"40","left":"40"}},"Mobile":{"unit":"px","dimension":{"top":"20","right":"20","bottom":"20","left":"20"}}},"contentBorder":{"radius":{"Desktop":{},"Mobile":[]}},"categoryColor":{"type":"variable","id":"zeever-primary"},"categoryTypography":{"type":"variable","id":"nav-font"},"categoryMargin":{"Desktop":{}},"categoryPadding":{"Desktop":{}},"categoryBorder":{"radius":{"Desktop":{}}},"titleMargin":{"Desktop":{}},"titleColor":{"type":"variable","id":"zeever-primary"},"titleTypography":{"type":"variable","id":"h4-font"},"excerptMargin":{"Desktop":{}},"excerptColor":{"type":"variable","id":"zeever-primary"},"excerptTypography":{"type":"variable","id":"body-text-font"},"readmoreTypography":{"type":"variable","id":"readmore-font"},"readmoreMargin":{"Desktop":{}},"readmorePadding":{"Desktop":{"unit":"px","dimension":{"top":"15","right":"30","bottom":"15","left":"30"}},"Tablet":[]},"readmoreColor":{"type":"variable","id":"zeever-primary"},"readmoreBackground":{"type":"default","color":{"r":255,"g":255,"b":255,"a":0}},"readmoreBorder":{"radius":{"Desktop":{"unit":"px","dimension":{"top":"0","right":"0","bottom":"0","left":"0"}},"Tablet":[]},"all":{"type":"solid","width":"1","color":{"type":"variable","id":"GGO1PZ"}}},"readmoreHoverBorder":{"radius":{"Desktop":{}},"all":{"type":"solid","width":"1","color":{"type":"variable","id":"zeever-form"}}},"commentMargin":{"Desktop":{}},"commentPadding":{"Desktop":{}},"metaMargin":{"Desktop":{}},"paginationMargin":{"Desktop":{}},"paginationPadding":{"Desktop":{}},"paginationBackground":{"type":"default"},"paginationBorder":{"radius":{"Desktop":{}}},"background":{"type":"default","color":""},"backgroundHover":{"type":"default","color":""},"border":{"radius":{"Desktop":[]}},"margin":{"Desktop":{"unit":"px","dimension":{"top":"40"}}},"padding":{"Desktop":{}}} -->

<div class="guten-element guten-post-block guten-dAStNb"></div>

<!-- /wp:gutenverse/post-block --></div></div></div>

<!-- /wp:gutenverse/column --></div></section></div>

<!-- /wp:gutenverse/section -->

<!-- wp:template-part {"slug":"footer","theme":"zeever","tagName":"footer","className":"site-footer"} /-->

Hi, thanks for the info. i found another way!

• This reply was modified 1 year, 6 months ago by psycholoogmarieke.
• This reply was modified 1 year, 6 months ago by psycholoogmarieke.

Yes, they are all on fullwidth section but no changes in the page.

• This reply was modified 1 year, 6 months ago by psycholoogmarieke.

hi, not that I know. this is my css:

/4 blokken op homepage breder, op mobiel smaller/
@media only screen and (max-width: 1024px) { guten-psy{ width: 100% }

.guten-psy{ width: 100% }
}
@media only screen and (min-width: 1025px) { guten-psy{ width: 155% }

.guten-psy{ width: 155% }
}

.guten-column.guten-eCMYTc > .sticky-wrapper > .guten-column-wrapper:before {
z-index: -1;
}

.guten-eCMYTc div.wpforms-container-full {
margin-left: 0;
}

.guten-column.guten-wnVitj > .sticky-wrapper > .guten-column-wrapper::before {
z-index: -1;
}

/** WPFORMS button color **/
.wpforms-form button[type=submit] {
background-color: #000000 !important;
border-color: #DDD28C!important;
color: #fff !important;
transition: background 0.3s ease-in-out;
font-family: poppins;
text-transform: uppercase;
font-size: 15pt;
font-weight: 600;
letter-spacing: 2px;
}

/** WPFORMS label color **/
.wpforms-form label{
color: #ffffff !important;
}

/** WPFORMS Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
background-color: #ffffff !important;
}

.wpforms-form button[type=submit]:hover {
background-color: #DDD28C
!important;
color: #000000 !important;
}

.wpforms-container { font-family: poppins;
font-size: 15pt;
}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a i, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul li.menu-item-has-children > a i {
font-size: 30px;
}

.guten-column .guten-icon-box, .guten-column .guten-icon-box-wrapper {
height: 100%;
} wpforms-1605 {

width: 100%;
margin: var(--wp--preset--spacing--30);

}

/** menu mobiel kleiner en uitgevouwen**/
@media screen and (max-width: 1024px) {
.gutenverse-menu .sub-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}

.guten-nav-menu.guten-element.break-point-mobile .gutenverse-menu-wrapper {
    height: auto !important;
}

}

@media screen and (max-width: 780px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a > i {
display: none;
}
}

/** menu achtergrond enkel op mobiel en niet pc**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu {
padding: 8px!important;
}
.guten-nav-menu .gutenverse-menu-wrapper ul, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li > a {
line-height: normal!important;
}
}

/** randje om mobiele menu**/
@media only screen and (max-width: 1024px) {
.guten-nav-menu.break-point-mobile .gutenverse-menu-wrapper .gutenverse-menu-container {
border: 1px solid #DDD28C;
}
}

How can i turn it off?

hi, thank you.

now i have the hamburger menu only visible on a mobile. that’s good.