Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

Active 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
 
Hi there,

Welcome to Code Forum!

You can use both height: x; and width: x; to change the height and width of an element.
 
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]
 
Last edited:
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.
 
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 %
 
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
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;
}
 
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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom