the widget widget dw_focus_top_posts in the header doesnt show correctly

chan liu
asked 10 years ago

the widget widget dw_focus_top_posts showing in the header cant process different size of images. here is my site: http://115.28.149.124/
this issue results in the page shaking all the time because i set up the Interval time for the widget in wordpress admin.
how can I make the widget disply the consistant height and width in my page?

3 Answers

DominicStaff
answered 10 years ago

Hi Chan,
In order to have images in the DW Focus: Slider widget displayed in a consistent height and width, you can add the following code to the Header Script :

 <style>
.dw_focus_top_posts .attachment-slider-thumb {
   width: 100%;
   max-height: 375px;
}
</style>

Hope this helps !

chan liu
replied 10 years ago

thanks a lot. it works in PC right now. but there are still 2 problems:

1. the image showing in sliders dont have the right ration of width and heigth
2. In mobile, the page is still shaking because the different height of the images

how can I solve that. thanks.

DominicStaff
answered 10 years ago

Hi chan ! To resolve image issue on the “Mobile”, you can add the following code to the “Header Code”

<style>
@Media (max-width: 480px) {
     .news-slider .carousel .carousel-inner img {
            height: 250px;
}
}
</style>

If you still face the issue, please send me username & password of your site for further checking. Hope this helps !

chan liu
answered 10 years ago

I resolved this problem. by my way, the top news slider can:
1. automatically self adopt to the mini screen in mobile and wide screen in desktop
2. the image size ratio of width and height will keep the same as the original’s. which means the image wont be twisted.
add the following code in the “header code” which locates in WordPress admin > appearance > customize > custom wp_head() code

<style>
@media (max-width: 599px) {
.news-slider .carousel .carousel-inner .entry-thumbnail {
height: 250px;
overflow-x: hidden;
overflow-y: hidden;
}}

.news-slider .carousel .carousel-inner .entry-thumbnail {
max-height: 376px;
overflow-x: hidden;
overflow-y: hidden;
</style>