Tilpasning af billeder og site i responsive tema

WordPress DK Forum » Temaer

Tilpasning af billeder og site i responsive tema

(15 indlæg) (2 voices)

Startet for 13 years siden af Naztrida
Seneste svar fra Naztrida
This topic is resolved

Tags:

Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Jeg har lige skiftet til det tema, der hedder Lugada på min blog. Det er i responsive design, men jeg har et problem med, at det ikke tilpasser ordentligt på mobil - i hvert fald ikke på min iPhone5. Nogen der ved, hvordan jeg løser det?

Et andet problem, som muligvis/muligvis ikke hænger sammen med ovenstående, er at jeg henter billeder ind på sitet fra min Flickr konto vha. plugin'et Wordpress Media Flickr. Men i mobilversionen tilpasser den ikke billederne - den klipper dem bare over. Tænker at der er en eller anden fixed width, jeg skal have pillet ved, men hvor og hvordan?

Min blog ligger her Connecting the dots...

Venlig hilsen
Astrid :)

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Ingen med erfaringer med dette? Jeg ville godt nok gerne have det løst! ;-)

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Hejsa Naztrida

Grunden til at dine billeder ikke skalere er fordi der er sat bredde og højde på dem, det skal du fjerne. Nu ved jeg ikke lige hvordan dit tema behandler billederne, men prøv som udgangspunkt at indsætte billeder i fuldstørrelse og tilføj så denne kode ti din style.css fil.
img { max-width: 100% !important; }

software pilot hos Arnsbomedia
Plugin Convert image to media
http://www.meetup.com/WordPr

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Mange tak for svar, Amras.

Temaet har i forvejen følgende sektion i style.css:
/* =============================================================================
Images
========================================================================== */
img {
border: 0;
-ms-interpolation-mode:
bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
img.size-full,
img.size-large {
max-width: 95.5%;
height: auto;
}
img[class*="align"],
img[class*="wp-image-"]{
border: 1px dashed #DDDDDD;
padding: 6px;
margin: auto;
}
img.alignnone {
margin: 7.5px 0;
}
img.alignright {
display: inline;
float: right;
margin: 5px 0 15px 15px;
}
img.alignleft {
display: inline;
float: left;
margin: 5px 15px 15px 0 ;
}
img.aligncenter {
clear: both;
display: block;
margin: 10px auto;
}

Skal jeg indsætte det et sted der, tænker du? Og i givet fald hvor?

Astrid

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Bare i toppen er fint

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Jep - nu har jeg sat følgende ind i toppen af image-sektionen i stylesheetet:

img {
max-width: 100% !important;
height: auto;
}

Jeg var nødt til at tilføje det med højden, for ellers strakte den billederne mærkeligt, men nu ser det ud til at virke.

Tusinde tak for hjælpen! :)

(Jeg har stadig et problem med, at temaet ikke tilpasser sig bredden på skærmen af min iPhone, men det går jeg ikke ud fra, at du også lige har en løsning på?)

Astrid :)

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Hej Adstrid

Det kan være det skyldes et generelt problem som ios har med en zoom/orientering notifikatiton.

Her er et javascript du kan sætte ind på din blog som fixer det.

Forklaring: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/

Javascript: https://github.com/scottjehl/iOS-Orientationchange-Fix

p.s for at du ikke skal tilføje højde kan du sætte kode ind i samme blok.
height:auto;

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Hej igen

Tak for dit svar - jeg prøvede at uploade scriptet til js-mappen under temaet, men det ser ikke ud til at gøre det - har du et godt råd?

Astrid :)

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Hej Astrid

har du husket at inkludere scriptet i din html fil ?

<script src="link til fil" type="text/javascript"></script>

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Argh, det kan jeg ikke få til at virke. Det ville vist kræve lidt mere indblik i koderne, end jeg kan mønstre. Men mange tak for forsøget! :)

Astrid

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Hej igen

Jeg løfter lige denne op igen, da jeg endnu ikke har fået løst problemet. Jeg vil virkelig gerne have hjælp til det, for hvis jeg ikke får det til at virke, må jeg ud i at skifte tema igen. Det skal siges, at jeg forsøgte løsningen ovenfor, men at jeg heller ikke lykkedes med at få det til at virke, desværre.
Problemet er stadig, at temaet sådan set gør klar til at tilpasse, dvs. lægger det hele i én kolonne - men kolonnen bliver placeret i venstre side af skærmen, og resten af bredden er tom.
Se eksempel fra min telefon HER

Nogen der har et bud?

VH
Astrid :)

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Hej Astrid

Dit link virker ikke.

Skrevet 13 years siden #
René Skou

Supermedlem
Joined: feb '13
Posts:
Reputation:

Der er en css klasse "rowheader" i style.css på linje 507 der har en max-width:755px;

Det er den der skaber rod, du kan bare udkommenter den.

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Linket manglede et kolon - det her virker, sorry.

Og når du siger udkommentere, hvad mener du så helt præcist? :)

Skrevet 13 years siden #
Naztrida

Medlem
Joined: feb '13
Posts:
Reputation:

Damn - googlede det med at udkommentere. Det virker. :D Kanon!

Tusinde tak for hjælpen @Amras!!

Astrid

Skrevet 13 years siden #

RSS feed for this topic

Svar

Du skal være logget ind for at skrive.