Plaatje te groot op mobiel | Wordpress

Hai,

Ik ben een website aan het repareren maar zie dat het plaatje op de homepage, veel te groot, dus niet ingekapseld, wordt weergegeven op een smartphone. Ik heb div. dingen geprobeerd maar kan het niet oplossen. Kan iemand aan de code zien of er iets fout staat?

Zie hieronder:
[vc_row full_width="stretch_row_content" content_placement="middle" full_height="yes" wpex_bg_overlay="color" columns_right="yes" tablet_fullwidth_cols="yes" offset_overlay_header="yes" css=".vc_custom_1665002293274{padding-right: 250px !important;padding-left: 250px !important;background-image: url([url]https://margreethonigfoundation.com/wp-content/uploads/2019/04/Margreet-Honig-2019-©Foppe-Schut-.-highres-.-_7FS4622.jpg?id=83[/url]) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_overlay_color="#ffffff" wpex_bg_overlay_opacity="0.25"][vc_column][vcex_heading text="#E-8_JTIyRG9vciUyMG1lZXIlMjBpbnRlcmFjdGllJTIwb250c3RhYXQlMjBlciUyMHpvdmVlbCUyMG1vb2lzLiUyMg==" italic="true" tag="h2" text_align="right" font_size="35" line_height="1" css=".vc_custom_1560363907329{margin-top: 450px !important;padding-right: 50px !important;}" color="#000000"][vcex_heading text="~ Margreet Honig" text_align="right" font_size="20" css=".vc_custom_1560364124987{margin-top: 10px !important;padding-right: 50px !important;}"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" column_spacing="60" css=".vc_custom_1560756856392{padding-right: 5% !important;padding-left: 5% !important;}"][vc_column width="2/3" css=".vc_custom_1560756927289{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1664914420363{margin-top: 125px !important;}

Kan je de code even ontspaghettiën én tussen code-tags plaatsen?
Ik neem aan dat je zelf ook wel ziet dat dit een brei aan code is.

Je zou voor de handigheid dit ook op JSfiddle kunnen plaatsen.

Ehm.... ik weet niet hoe te ontspaghettien. Sorry.... Ik heb deze code ook niet zelf gemaakt. Volgens mij is dit allemaal in WP Bakery gedaan.

Is dit beter?

[vc_row full_width = "stretch_row_content"
content_placement = "middle"
full_height = "yes"
wpex_bg_overlay = "color"
columns_right = "yes"
tablet_fullwidth_cols = "yes"
offset_overlay_header = "yes"
css = ".vc_custom_1665002293274{padding-right: 250px !important;padding-left: 250px !important;background-image: url(https://margreethonigfoundation.com/...4622.jpg?id=83) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"
wpex_bg_overlay_color = "#ffffff"
wpex_bg_overlay_opacity = "0.25"
][vc_column][vcex_heading text = "#E-8_JTIyRG9vciUyMG1lZXIlMjBpbnRlcmFjdGllJTIwb250c3RhYXQlMjBlciUyMHpvdmVlbCUyMG1vb2lzLiUyMg=="
italic = "true"
tag = "h2"
text_align = "right"
font_size = "35"
line_height = "1"
css = ".vc_custom_1560363907329{margin-top: 450px !important;padding-right: 50px !important;}"
color = "#000000"
][vcex_heading text = "~ Margreet Honig"
text_align = "right"
font_size = "20"
css = ".vc_custom_1560364124987{margin-top: 10px !important;padding-right: 50px !important;}"
][/vc_column][/vc_row][vc_row full_width="stretch_row_content" column_spacing="60" css=".vc_custom_1560756856392{padding-right: 5% !important;padding-left: 5% !important;}"][vc_column width="2/3" css=".vc_custom_1560756927289{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1664914420363{margin-top: 125px !important;}]

Ik bak er geen brood van

In het algemeen geeft de volgende css een responsive afbeelding

In jouw css wordt heel veel !important (hoogste prioriteit) gebruikt.
Misschien is daarom dit nodig: max-width: 100% !important; height: auto !important;

Ik zie in je css

Een background-image kan je niet "in haar geheel zichtbaar" responsive maken. Er zijn 2 mogelijkheden: 1) responsive maar je hebt lege randen (onder/boven of links/rechts). 2) responsive maar er vallen delen van de afbeelding buiten beeld.


! als alles !important is dan heeft alles de hoogste prioriteit, kan je het net zo goed overal weghalen

bron zei:

Ik bak er geen brood van

In het algemeen geeft de volgende css een responsive afbeelding

Code:

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

In jouw css wordt heel veel !important (hoogste prioriteit) gebruikt.
Misschien is daarom dit nodig: max-width: 100% !important; height: auto !important;

Klik om te vergroten...

Maak het nog uit waar in de css ik deze code zet? Begin, eind etc? Ik ga het straks even uit proberen. Dank voor het mee denken.

Bericht #5 -> In bestand ".../themes/Total/style.css" staat img{max-width:100%;height:auto}
Het is niet zinvol om dit dubbel erin te zetten. Is niet de oplossing dus.

Ik ben een website aan het repareren maar zie dat het plaatje op de homepage, veel te groot, dus niet ingekapseld, wordt weergegeven op een smartphone.

Klik om te vergroten...

Bericht #6 -> dit komt omdat is gekozen voor een background-image.

Zoals het op deze website is gedaan (met een background-image) wordt het op meer websites gedaan. De afbeelding is op elk scherm hoog en links/rechts verdwijnen delen uit het beeld bij smallere schermen, dus vooral bij smartphone.

Mijn advies. Afbeelding zo laten, en (als het lukt) de tekst op de afbeelding op smartphone centreren. Hoe en waar in deze theme is niet 123 te zeggen.

Wacht:
1. welk theme gebruikt de website?
2. is deze responsive?
3. wat is de url?

@bron
Dank ik ga het proberen.

@Femke
Theme is Total Child
Geen idee of hij responsive is
www.margreethonigfoundation.com

als jij je browser verkleind door met je muis de pagina naar links te verschuiven, kan je zien of die responsive is.
En is zie dat het theme dat wel is.
Maar, de homepage verkleind naar mobiel grootte, daar zie je het menu niet meer.
De tekst zou ik zelf zo laten.

Even kijken of je kan aanklikken dat je op de home page een menu knop te zien krijgt, dat moet haast wel in te stellen zijn bij weergave-customizer (dashboard WP)

@Femke,

klopt. Hij lijkt inderdaad responsive te zijn.

Als ik op mijn pc de browser op 320px breed zet dan staat het menu tegen de foundation naam aan.
Hetzelfde is het geval op mijn smartphone.

Info: bij smartphone komt het aantal css-pixels niet overeen met de werkelijke scherm-pixels.



Responsive ziet alles op de Home pagina er goed uit op wat kleine dingetjes na in de opmaak van de content.
Wat is precies je vraag? En in welk gedeelte van de pagina?

ja, nu ziek het menu wel naast de tekst.

Het probleem blijft nog steeds het plaatje op de homepage dat op de smartphone veel te groot is, en slechts deels wordt weer gegeven.

Als ik het op de computer verklein naar bijv smartphone weergave lijkt dat probleem er niet te zijn, maar bekijk ik het werkelijk op de Smartphone, is het probleem er nog steeds.

klopt, ik zie het nu ook. Maak je je browser kleiner is het wel oké.

Heb je de afbeelding in WP gezet in Weergave en dan customizer?
Gebruik je toevallig een verkleiner voor je afbeeldingen?

Ik zie dat je https://wpbakery.com/ gebruikt voor het maken van de website?
Overigens is je verbinding ook niet veilig, kijk maar naar wat er voor je URL staat.

Het probleem blijft nog steeds het plaatje op de homepage dat op de smartphone veel te groot is, en slechts deels wordt weer gegeven.

Klik om te vergroten...

Dit is geen probleem, dit hoort zo. Oorzaak: zie berichtje #6

Als er een <img> gebruikt zou zijn i.p.v. een background-image dan zou het er zo uitzien op smartphone.


Dit is niet "even" aan te passen, het is een ingreep in de theme.

@bron Ik heb al geprobeerd om die background te vervangen door normale img maar dan verandert hij alles, dus ook de sidebalk op de home page

@ femke
In weergave, customizer kan ik niets veranderen aan de image. Er wordt niets actiefgemaakt.

WPbakery is zeker ook gebruikt voor deze website maar ook gewoon css etc. Het is een mengelmoesje

Ik heb al geprobeerd om die background te vervangen door normale img maar dan verandert hij alles, dus ook de sidebalk op de home page

Klik om te vergroten...

Net berichtje #17 aangevuld. Het gaat niet met "even iets" aanpassen. Html en css van de header van de theme moeten flink veranderd worden.

Dank voor het mee denken.

Ik word er hoorndol van. Ik ben er al meer dan 7 avonden mee bezig

En ik durf niet echt aan de css danwel aan de html van theme te sleutelen. Bang dat ik dan de hele opzet van de website verneuk