Plaatje te groot op mobiel | Wordpress

Status
Niet open voor verdere reacties.
Nee, je moet ook niet aan de theme sleutelen. Je moet een Child-theme aanmaken en daar je aanpassingen in doen. Zo voorkom je dat bij een update van je theme je wijzigingen weer terug worden gedraaid.
 
In html/css is dit een mogelijkheid. Je zal het zelf in een child theme moeten inpassen.

CSS toevoegen
Code: 
.my-custom-overlay {
   position: relative;
   padding-top: 10px;
}
.my-custom-text {
   display: flex;
   align-items: flex-end;
   position: absolute;
   top: 0; right: 0;bottom: 0; left: 0;
   background-color: rgba(255,255,255, .3);
}
.my-custom-text h2 {
   width: 100%;
   padding: 10px;
   text-align: center;
   color: #000;
   font-family: inherit;
   letter-spacing: inherit;
   font-size: 24px;
   line-height: 1;
   font-style: italic;
   font-weight: 400;
}
.my-custom-text h2 span:last-child {
   font-size: 16px;
}
@media (min-width: 576px) {
   .my-custom-text h2 {
      font-size: 30px;
   }
   .my-custom-text h2 span:last-child {
      font-size: 20px;
   }
}
@media (min-width: 768px) {
   .my-custom-text h2 {
      font-size: 40px;
   }
   .my-custom-text h2 span:last-child {
      font-size: 24px;
   }
}

HTML : gedeelte met background-image vervalt. Daarvoor in de plaats een nieuw stuk html met een <img>
Code: 
<article id="single-blocks" class="single-page-article wpex-clr">
<div class="single-page-content single-content entry wpex-clr">

<!-- begiin vervallen -->
<!--
<div class="vc_row wpb_row vc_row-fluid vc_custom_1665262408440 wpex-vc_row-has-fill wpex-vc-reset-negative-margin wpex-has-overlay">
   <div class="wpb_column vc_column_container vc_col-sm-12">
      <div class="vc_column-inner">
         <div class="wpb_wrapper">
            <h2 class="vcex-heading vcex-module wpex-text-2xl wpex-font-normal wpex-m-auto wpex-max-w-100 vcex-heading-plain wpex-block wpex-text-right wpex-italic vc_custom_1560363907329" style="color:#000000;font-size:35px;line-height:1;">
               <span class="vcex-heading-inner wpex-inline-block wpex-clr">
                  "Door meer interactie ontstaat er zoveel moois."
               </span>
            </h2>
            <div class="vcex-heading vcex-module wpex-text-2xl wpex-font-normal wpex-m-auto wpex-max-w-100 vcex-heading-plain wpex-block wpex-text-right vc_custom_1560364124987" style="font-size:20px;">
               <span class="vcex-heading-inner wpex-inline-block wpex-clr">
                  ~ Margreet Honig
               </span>
            </div>
         </div>
      </div>
   </div>
   <div class="wpex-bg-overlay-wrap">
      <span class="wpex-bg-overlay color" style="background-color:#ffffff;opacity:0.25;"></span>
   </div>
</div>
-->
<!-- einde vervallen -->

<!-- begin nieuw -->
<div class="vc_row wpb_row vc_row-fluid wpex-vc-reset-negative-margin my-custom-wrapper">
   <div class="my-custom-overlay">
      <div class="my-custom-image">
         <img src="https://margreethonigfoundation.com/wp-content/uploads/2019/04/Margreet-Honig-2019-%C2%A9Foppe-Schut-.-highres-.-_7FS4622.jpg?id=83" alt="">
      </div>
      <div class="my-custom-text">
         <h2><span>"Door meer interactie<br>
         ontstaat er zoveel moois."<br></span>
         <span>~ Margreet Honig</span></h2>
      </div>
   </div>
</div>
<!-- einde nieuw -->
 
Laatst bewerkt:
@bron

Heel veel dank voor je moeite.

Ik moet dit wel even bestuderen want ik heb (nog) geen idee hoe en waar ik dit zal moeten doen. Maar ik ga me verdiepen!

Nogmaals, dank voor het mee denken!

- montein
 
Toch nog even het volgende:
Het is een achtergrond afbeelding.
Je hebt het in mijn dashboard - weergave - customizer gedaan neem ik aan.

Heb je ook gedacht aan hoe je de achtergrond wilt?
Zie screenshots, wie weet helpt het om het beter te krijgen.

1e screenshot staat het plaatje nog in het midden,
maar je kan dus spelen met links, recht, midden, onder, boven etc.
 

Bijlagen

  • 1.png
    1.png
    451,9 KB · Weergaven: 17
Hai,
Een update.

Ik heb even gespeeld met de aanbevolen html code op de home page.
Ik heb nog niets met het Child thema gedaan, maar wou even kijken wat het effect was van de html.

Toen ik deze invoerde verdwenen de zij balken op mijn computer weergave.
Ik heb zelf het een en ander gecombineerd qua code, zie verderop en toen waren de zij balken er weer (laptop) en nu is ook de weergave op de smartphone goed. En dat is voor nu het belangrijkste omdat wij in november een event hebben waar veel mensen onze website gaan bekijken op de telefoon.

Alleen ziet het er niet meer zo goed uit op de laptop weergave. Nu is er teveel wit onder de foto, en is de totaalweergave niet meer vullend. Zie www.margreethonigfoundation.com.

Hieronder nog even de code zoals ik die nu gebruik.
Code: 
<article id="single-blocks" class="single-page-article wpex-clr">
<div class="single-page-content single-content entry wpex-clr">

<img src="https://margreethonigfoundation.com/wp-content/uploads/2019/04/Margreet-Honig-2019-%C2%A9Foppe-Schut-.-highres-.-_7FS4622.jpg?id=83" alt="" />
<div class="vc_row wpb_row vc_row-fluid wpex-vc-reset-negative-margin my-custom-wrapper">
<div class="my-custom-overlay">
<div class="my-custom-image">

[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;}"]
 
Laatst bewerkt door een moderator:
IN feite heb je dus het theme in block gezet en niet in zijn geheel.
Dat is het enige wat ik zo kan zien.
Is toch mooi zo? Op mijn laptop ziet de website er goed uit.

Heb je misschien een link van het theme wat je gebruikt? Ik kan het nergens vinden want ik ben best nieuwsgierig hoe of wat dat theme kan.
 
Om "even" te testen kan je een backup van de theme maken die je later weer terugzet. Zet de html eerst zonder wp_tags erin en ga daarna (als het er goed uitziet) aan de slag met wp_tags

Dit staat nu op de website, vergelijk het eens met berichtje #22 :confused:

Code: 
<div class="vc_row wpb_row vc_row-fluid wpex-vc-reset-negative-margin my-custom-wrapper">
  <div class="my-custom-overlay">
    <div class="my-custom-image">
      <div class="vc_row wpb_row vc_row-fluid vc_custom_1560756856392 wpex-vc-row-boxed-layout-stretched wpex-vc-has-custom-column-spacing wpex-vc-column-spacing-60">
        <div class="wpb_column vc_column_container vc_col-sm-8">
          <div class="vc_column-inner vc_custom_1560756927289">
            <div class="wpb_wrapper">
              <div class="wpb_text_column wpb_content_element  vc_custom_1664914420363" >
                <div class="wpb_wrapper">
                  <p>Welkom bij Margreet Honig Foundation...</p>
                  <p>Uw steun wordt zeer gewaardeerd!</p>
                </div>
 
Even een update....
Als ik de code van bericht 22 er in stop, ziet het er goed uit maar ben ik de columnstructuur, rechts, kwijt. (=steun ons en subscribe).

Die columns krijg ik alleen terug als ik dit er onder plak:
Code: 
[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;}"]

Maar dit blokje zorgt ook voor lelijke extra witregels onder de foto die ik op geen enkele manier kan verwijderen.

Iets anders vreemds, maar dat zal hier van los staan is dat ik opeens in het menu een zoekfunctie heb staan, onder header. Geen idee waar die vandaan komt (maar ik heb veel div. dingen uitgeprobeerd) maar die krijg ik ook niet weg...
 
Laatst bewerkt door een moderator:
M.b.v. pure html/css is het relatief makkelijk een oplossing te maken maar dit is altijd moeilijk om te zetten naar WP [.......] tags. De reden is dat de genoemde tags door de theme maker zijn bedacht en ze html genereren die lastig is om te zetten in een kolom indeling. Daarbij komt ook nog dat de theme maker een fan is van !important wat het extra moeilijk maakt om wijzigingen aan te brengen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan