HTML & CSS Need Custom CSS help with WP theme.

[Siim518]

How can i change the main slide pictures size? The pictures are too big, i would like them to be half size. The theme dosent have an option to select the size manually,so i must change it by code. Theme has a custom CSS option, where i can paste the code and it changes the pictures size then, i tryed this code ".featured-slider.slick-initialized.slick-slider { width: 50%; margin: 0 auto; } "
It only changes the width of the image, how can i put the width to auto and change the height instead?

Website: http://majahaldur.ee

 

[Malcolm]

Hi there,

Welcome to Code Forum!

You can use both height: x; and width: x; to change the height and width of an element.

 

[Siim518]

.featured-slider.slick-initialized.slick-slider {
width: 50%;
height: 50%;
margin: 0 auto;
}

So the command should look like this?

 

[Malcolm]

.featured-slider.slick-initialized.slick-slider {
width: 50%;
height: 50%;
margin: 0 auto;
}

So the command should look like this?

Yes it should look somewhat like that.

 

[darioK]

Try adding !important

For example

height: 50% !important;

 

[Tealk]

Try adding !important

one should deal with it extremely critically:

When Using !important Is The Right Choice | CSS-Tricks

Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here.

css-tricks.com

 

[darioK]

one should deal with it extremely critically:

When Using !important Is The Right Choice | CSS-Tricks

Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here.

css-tricks.com

Yes, as I know WP overrides some css properties, so sometimes its necesary.

 

[Siim518]

At the moment i have added this code, but it still only resizes the width, it seems that the WP CSS editor ignores the height command completely. https://majahaldur.ee
Also it looks like the width now also changes in different views, mobile, desktop, laptop, its different everywhere.
[CODE lang="css" title="CSS"].featured-slider.slick-initialized.slick-slider {
width: 61.4%;
height: 10% !important;
alignment-adjust
align-content:center;
margin: 0 auto;
}[/CODE]

 

[darioK]

At the moment i have added this code, but it still only resizes the width, it seems that the WP CSS editor ignores the height command completely. https://majahaldur.ee
Also it looks like the width now also changes in different views, mobile, desktop, laptop, its different everywhere.
[CODE lang="css" title="CSS"].featured-slider.slick-initialized.slick-slider {
width: 61.4%;
height: 10% !important;
alignment-adjust
align-content:center;
margin: 0 auto;
}[/CODE]

Try removing everything except height and see what happens.

 

[Siim518]

Image goes full size, nothing happens, only width command works, height command has 0 effect.

 

[darioK]

Did you try max-height?
If that does not work i'll look it up later on my pc

 

[Siim518]

yes, still same problem.

 

[darioK]

This should work, play around with it. 🙂

.slick-slide img{
    width: auto;
    height: 50vh;
}

 

[Siim518]

Jes it worked, thanks!=) What was the trick?

 

[darioK]

I did not check but what I suspect is that parent element of that image does not have a set height property, so what this does is just takes viewport height (vh) and sets it to be half of it, basically its almost the same as %

 

[Siim518]

I have a second question also, its about the same WP theme. I wonder if i can align those icons on the front page? At the moment one icon is higher than the other.

Screenshot:

 

[darioK]

Its not just icons that is not aligned, its text also.

If you set the height of those elements which is .single-item if i am not mistaken, then it should be aligned.

For example:

.single-item{
    height: 200px;
}

 

[Siim518]

Ok thanks il give it a try🙂

 

[Siim518]

I used your code and the first icons and text lined up nicely, but the last 2 still crooked.

 

[darioK]

Try 270px, or you could do something like read more and expand text if you want it to be more compact.

It does not align properly because amount of text sets the height of the element and it appears to be differently aligned but its not.
You can set overflow to hidden and with some simple js you could affect the height of the element which is being clicked on, with transition it would look good.