Hello, I have a little problem with the display in the responsive design "@media only screen and (max-width: 420px)" As soon as I link the article picture, the frame of the box around the picture is removed. The frame then ends on the left and right approx. 10px below the article image. Unfortunately I can not find the error and need help.
Could you also link the entire box for dasresponsive design?
My Code Html
<div class="box"><a href="[wpv-post-url]">[wpv-post-featured-image size="full" class="box-bild"]</a>
<h2>[wpv-post-link]</h2>
<p>[wpv-post-excerpt length="20" count="word" more="..."]</p>
<hr />
<div class="categ"><strong>Relevante Themen: </strong>[wpv-post-taxonomy type="category" separator=" | "]</div>
<hr />
<p style="text-align: right;">[wpv-post-read-more label="... diesen Beitrag lesen" class="btn btn-primary"]</p>
</div>
My Code CSS
.box {
max-width: 800px;
margin: 20px 0px 0px 0px;
}
.box-bild {
max-width: 100%;
}
.box h2 {
padding: 10px 0px 0px 0px;
}
@media only screen and (max-width: 420px) {
.box {
border: solid 1px #D3D3D3;
-moz-border-radius: 2em; -webkit-border-radius: 1em;
border-radius: 1em;
}
.box-bild {
border-radius: 1em 1em 0 0;
}
.box h2 {
padding: 10px 10px 0px 10px;
}
.box p {
padding: 0px 10px 0px 10px;
}
.btn-primary {
display: none;
}
.box hr {
display: none;
}
.categ {
display: none;
}
Thank you!
Hello, it looks like the problem is the white box shadow applied here in style.css:
/* Fixes linked images */
.entry-content a img,
.widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}
At smaller screen sizes, you should disable the white box-shadow on these images:
@media only screen and (max-width: 420px) {
.entry-content a img {
-webkit-box-shadow: none;
box-shadow: none;
}
}
Let me know if this does not solve the problem.
Could you also link the entire box for dasresponsive design?
If you set the link tag to be display:block at smaller sizes, then the entire image will be clickable. If you want the entire box clickable, you would probably have to restructure the HTML so that the "a" link tag surrounds the entire contents of the box. As it is written now, the link tag does not surround the title and text, so those elements are not clickable.
