uitgelichte foto op mobiel niet responsive
-
Mijn uitgelichte afbeelding word niet in formaat aangepast op mijn mobiel, op mobiel krijg ik een grote foto die niet past in het beeldscherm. om hem volledig te zien moet je de pagina verkleinen. De pagina lay-out is wel responsive maar de afbeelding niet.
Ik gebruik de Corallina WordPress Theme.
wat kan ik hier aan doen? of waar zal het aan liggen?
-
Dag Richcorli,
Heb je een link naar je website toe?
Dan kijk ik er even voor je naar.dank je en nog een hele fijne zondag.
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Dag Richcorli,
Dank je,
De afbeeldingen op de link (de homepage dus) schalen bij mij gewoon op mobiel. Of gebeurt het op een andere pagina? Zo ja, graag de juiste link plaatsen zodat ik direct het probleem kan zien.
Zo niet, welk toestel gebruik je en welke browser?
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Dag Rich,
Super, dank voor de link.
Kun je onderstaande code toevoegen aan je stylesheet (style.css). Dit maakt de afbeelding responsive:
img {
max-width: 100% !Important;
}Lukt dit?
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Hey Thijs,
Thanks maar heb hem toegevoegd maar hij blijft hetzelfde.
Ik heb hem hier tussen geplaatst. Is dat goed? heb in de tekst aangegeven waar ik het heb geplaatst.Groetjes Rich
tr td {
border: none !important;
border-top: 1px solid #e7e7e7 !important;
padding: 6px 24px;
}
img {
margin: 0;
}
img.size-auto,
img.size-large,
img.size-full,
img.size-medium {
max-width: 100%;
height: auto;
}HEB HEM HIER GEPLAATS. ER HIER BOVEN OOK GEPROBEERD AAN TE PASSEN.
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;Hi Rich,
Dank voor je reactie.
Nee hij staat niet goed.
Graag helemaal onderaan het bestand plaatsen en precies plaatsen zoals dit:img {
max-width: 100% !Important;
}Hopelijk lukt dit.
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Dag Thijs,
Heb het geplaatst zoals je zij, maar het blijft gewoon hetzelfde. De foto word niet mee geschaald.
Kan het ook aan de foto zelf liggen? Want de template is voor de rest wel goed en de foto op de homepage en op de overige pagina’s zijn wel goed.
Alvast bedankt voor je moeite.
Groetjes Rich.
Dag Rich,
Kun je een screenshot van de code plaatsen? Dan kan ik checken of het goed staat.
Het ligt niet aan de foto, het ligt aan de template van dat soort pagina’s. Door de code schaalt de foto mee.
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
-
Dag Thijs,
Dit is het hele bestand, heb hem helemaal onderaan geplakt.
html .mceContentBody {
max-width: 640px;
}
* {
color: #444;
font-family: Georgia, “Bitstream Charter”, serif;
line-height: 1.5;
}
p,
dl,
td,
th,
ul,
ol,
blockquote {
font-size: 16px;
}
tr th,
thead th,
label,
tr th,
thead th {
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
}
pre {
font-family: “Courier 10 Pitch”, Courier, monospace;
}
code, code var {
font-family: Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;
}
body, input, textarea {
font-size: 12px;
line-height: 18px;
}
hr {
background-color: #e7e7e7;
border: 0;
clear: both;
height: 1px;
margin-bottom: 18px;
}
/* Text elements */
p {
margin-bottom: 18px;
}
ul {
list-style: square;
margin: 0 0 18px 1.5em;
}
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
}
dl {
margin: 0 0 24px 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 18px;
}
strong {
color: #000;
font-weight: bold;
}
cite,
em,
i {
border: none;
font-style: italic;
}
big {
font-size: 131.25%;
}
ins {
background: #ffc;
border: none;
color: #333;
}
del {
text-decoration: line-through;
color: #555;
}
blockquote {
font-style: italic;
padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
ins {
text-decoration: none;
}
sup,
sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
a:link {
color: #06c;
}
a:visited {
color: #743399;
}
a:active,
a:hover {
color: #ff4b33;
}
p,
ul,
ol,
dd,
pre,
hr {
margin-bottom: 24px;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
}
pre,
kbd,
tt,
var {
font-size: 15px;
line-height: 21px;
}
code {
font-size: 13px;
}
strong,
b,
dt,
th {
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-weight: normal;
line-height: 1.5em;
margin: 0 0 20px 0;
text-transform: uppercase;
}
h1 {
font-size: 2.4em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.9em;
}
table {
border: 1px solid #e7e7e7 !important;
border-collapse: collapse;
border-spacing: 0;
margin: 0 -1px 24px 0;
text-align: left;
width: 100%;
}
tr th,
thead th {
border: none !important;
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 9px 24px;
}
tr td {
border: none !important;
border-top: 1px solid #e7e7e7 !important;
padding: 6px 24px;
}
img {
margin: 0;
}
img.size-auto,
img.size-large,
img.size-full,
img.size-medium {
max-width: 100%;
height: auto;
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
margin-bottom: 12px;
}
.wp-caption {
background: #f1f1f1;
border: none;
-khtml-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: #888;
font-size: 12px;
line-height: 18px;
margin-bottom: 20px;
max-width: 632px !important; /* prevent too-wide images from breaking layout */
padding: 4px;
text-align: center;
}
.wp-caption img {
margin: 5px;
}
.wp-caption p.wp-caption-text {
margin: 0 0 4px;
}
.wp-smiley {
margin: 0;
}
img {
max-width: 100% !Important;
}Groet Rich
Dag Rich,
Thanks voor de code. Dat ziet er inderdaad goed uit.
Zou je deze code willen proberen:img.attachment-hot_deals-single.size-hot_deals-single.wp-post-image {
width: 100% !important;
}Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Dag Thijs,
Ook met deze foto lukt het niet.
Groet Rich
Dag Rich,
De code staat niet in de CSS.
Dus daar gaat toch echt iets fout.Heb je thema opties? Staat daar een custom code / css veld bij?
Groet,
Thijs- Deze reactie is gewijzigd 7 jaren, 2 maanden geleden door Richard van Denderen. Reden: Handtekening met reclame verwijderd, dit gaat tegen de forum regels in
Dag Thijs,
Ja die heeft hij.
Groet Rich
Dag Thijs,
Heb die code in de thema opties, custom code / css veld geplaatst.
De foto’s worden nu wel geschaald na mobiele formaat, alleen een ding de foto zijn niet scherp.Is daar misschien ook een oplossing voor.
Nog bedankt voor je geduld.
Groet Rich
- Het onderwerp ‘uitgelichte foto op mobiel niet responsive’ is gesloten voor nieuwe reacties.