• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Need Custom CSS help with WP theme.

Siim518

New Coder
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
 

Siim518

New Coder
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.
CSS:
.featured-slider.slick-initialized.slick-slider {
    width: 61.4%;
      height: 10% !important;
alignment-adjust
    align-content:center;
margin: 0 auto;  
}
 
Last edited:

darioK

New Coder
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.
CSS:
.featured-slider.slick-initialized.slick-slider {
    width: 61.4%;
      height: 10% !important;
alignment-adjust
    align-content:center;
margin: 0 auto; 
}
Try removing everything except height and see what happens.
 

darioK

New Coder
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

New Coder
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:
 

Attachments

  • icons.jpg
    icons.jpg
    155 KB · Views: 4

darioK

New Coder
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:
CSS:
.single-item{
    height: 200px;
}
 

darioK

New Coder
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.
 
Top Bottom