"neuestesn Beiträge" im Footer überschneiden sich + Bilder unterschiedlich groß

Das selbe Problem hab ich auch in meinem Blog. Zusätzlich verschiebt sich dort dann auch noch der “weiterlesen” button.

Wie erreiche ich da ein gleichmäßiges Design?

thx

here you go
you can see the problem both in the blog and in the footer

I used this because of design aspects. And as you can see from many big websites, that’s not uncommon. Check theverge.com for example. they have a container thats only 730. I changed it to 800 but it doesnt seem to get rid of the problem.

Is there a way to make those headlines responsive and thus smaller?
And what about my 2nd question about the pictures?

regards

• This reply was modified 5 years, 10 months ago by Eikordo.

I now changed the recent posts in the footer to a maximum of 3. That seems to work now as they are no longer shown side by side but in a vertical line.

Hi Mike,

Thanks for the answer and for the code! It seems to work partly. In Mobile the fond is still big and depending on the lengths of the text there’s still an overlay. Its the same problem for the blogposts. I could live with that as I’m not having so many visitors via tablet anyways but the mobile version should be working somehow. Maybe there’s something else you can do with your magic keyboard =)
regards

worked. Thanks mike.

One issue still remains at roughly 772px width, right before it changes to the 2 column view: the headlines of the blogposts still overlay.

here’s a screenshot

Hey Mike,

worked. Now i do have many “-” in my headlines tho whenever a long word is broken down into pieces. can I rather have it the way you did with the first code but just for smaller screen widths too? i prefer having a smaller font rather than having all those “-” in the headers.
that’d be great and close this post =)

Hey Mike.
I’ve set it to 900 max-width. That does the job. If you play around a bit with changing the width of my page and loog at the blog post overview, there’s still some issues. But i guess this is as good as it gets, isn’t it?!

Thanks for your help!

Hi Mike,

sorry for the late reply.

I agree. As long as the most common resolutions are running smoothly, it’s totally fine.
I’ve told you that I somehow tried to adjust the code you gave me. Now I suspect having some duplicates in the code.
Could you double check if everything is okay? I’m especially unsure about the h3 code, as it’s in there twice.
I’m sending this to you as my traffic has dropped by around 60% and I’m afraid the changes could be connected with that.

All the best, Eike

This is all the code i manually added to the enfold settings:

.blog-categories {

display: none!important;

}

.div.big-preview.multi-big, a.small-preview {
display: none;
}
.avia-content-slider .slide-meta div.slide-meta-comments,
.avia-content-slider .slide-meta div.slide-meta-comments + .slide-meta-del {
display: none;
}
.related_posts {
display:none!important;
}
.slide-entry.post-entry .slide-image {
max-height: 170px;
}
/*
#top .av-magazine .av-magazine-content-wrap .av-magazine-title a,
#top .av_iconlist_title a {
color: #d45e33;
} */
@media only screen and (min-width: 767px) and (max-width: 1441px) {
#av_section_2 .post-entry-1617 .slide-entry h3.slide-entry-title a {
font-size: 12px !important;
line-height: 12px !important;
}
}
@media only screen and (max-width: 767px) {
.av-special-heading-h2 h2 {
font-size: 21px;
}
}
@media only screen and (max-width: 767px) {
.av-special-heading-h1 h1 {
font-size: 26px;
}
}
@media only screen and (max-width: 900px) {
h3.entry-title a {
font-size: 18px !important;
line-height: 12px !important;
}
}

Hi Victoria,

that worked perfectly!

Thank you so much. This customer service is just awesome!
keep it up!