content slider center frame text

Hello and thanks Yigit.
it worked. Plans have changed though… it needs a left margin of some 200xp, i guess, so the text will be about at one third of the pic.
now ive tried the most logical thing

.groot {
    margin-left: 200px !important;
}

but this does not do anything. How can i give it a left margin?

best regards, jelle

• This reply was modified 3 years, 5 months ago by yampieters.

thanks yigit , that worked fine.
by the way, the content slider is displaying very big on a mobile, way to big.
now i can make a mobile version and a desktop version ( and so make two versions of the same thing in fact ):

.mobile {display:none !important;}
.desktop {display:block;}
@media only screen and (max-width: 479px) {
.mobile {display: block !important;}
.desktop {display: none !important;}
}

but is it also possible to tell the system to display the whole thing just small on a mobile?

the text itself i can make smaller by

@media only screen and (max-width:767px) {
  #top .groot .entry-title {
    font-size: 32px;
  }

  #top .groot .entry-title {
    font-size: 32px;
  }
}

but its more about the background picture that is way too big…

best regards, jelle

• This reply was modified 3 years, 5 months ago by yampieters.

hello Nikko, thanks for the reply.
Unfortunately this is not doing that much.
I ve activated it now so you can see it on a mobile.
best regards , jelle

• This reply was modified 3 years, 5 months ago by yampieters.

Hello Mike, thanks a lot…looks better…but the image itself was also an issue…its a background pic but it looks way too big on a mobile…
can i get it smaller on a mobiel?
best regards, jelle

Hi Mike, thanks for the reply.
But there seems to be a misunderstanding. Following your advice above hte image is still way to heigh and big.
( https://jmcwebdesign.nl/ppp/wp-content/uploads/2021/06/toobigthepic.jpg )
i would rather see it in proportion – scaled down – just like when you look at the website on a pc.
i have tried to visualize it in my selfmade picture below, which is representing the view on a mobile.
do you see what i mean? the background picture is in proportion now.
best regards, jelle

https://jmcwebdesign.nl/ppp/wp-content/uploads/2021/06/imageonmobile.jpg

ps: ive tried this code below, where the picture now is in control, but the top and bottom margins are huge, which is of course not what i want
( https://jmcwebdesign.nl/ppp/wp-content/uploads/2021/06/marginstoobig.jpg ):

/* plaatje homepage op gsm */
@media only screen and (max-width: 767px) { 
#top.home #home-content-slider {
 background-position: 85% !important;
 background-size: 100%;
}
}

• This reply was modified 3 years, 5 months ago by yampieters.

Hi Mike, wow, thats brilliant and exactly want i wanted.
there was only a small esthetic problem: https://jmcwebdesign.nl/ppp/wp-content/uploads/2021/06/Screenshot_20210625-162751_Chrome.jpg
the image was not covering the whole width of the screen.
but i could resolve this with changng contain by cover

@media only screen and (max-width: 374px) { 
#top.home #home-content-slider {
    background-size: cover !important;
}

my tablet is 1280×800.
herefor i added the code

@media only screen and (min-width: 1025px) and (max-width: 1280px) { 
#top.home #home-content-slider {
    background-size: cover !important;
}
#top.home #home-content-slider > .container {
	height: 455px !important;
}
}

and got a rather satisfying result
i think you can close this ticket now.

best regards, jelle

• This reply was modified 3 years, 5 months ago by yampieters.