Bildgrösse / Block

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Bildgrösse / Block

Ungelesener Beitrag von inno »

Hallo,
ist es möglich das Bild im Textblock breiter zu machen. So wie das dunkel graue Bild (unten). Es geht um die mobile Ansicht, da hier die Bilder in einer unterschiedlichen Breite dargestellt werden.
Screenshot anbei.
Danke
Dateianhänge
bild.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgrösse / Block

Ungelesener Beitrag von Tommy Herrmann »

... ohne Deine Seite zu sehen (publiziere diese doch mal auf den Server, eventuell auch in ein Verzeichnis "test"), kann man eigentlich nicht helfen.

Jeder Mobirise-Block (es gibt mehr als 4500 Blöcke) ist etwas anders und die CSS kann ganz anders aufgebaut sein. Meist hat Mobirise da einen Außen-Abstand ("padding") angegeben oder auch eine maximale Breite ("max-width") in Prozent.

Das kann man alles anpassen, aber nicht ohne zu wissen was dort jetzt steht.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

Das wäre die CSS vom Block mit dem schmalen Bild:

Code: Alles auswählen

padding-top: (@paddingTop * 20px);
padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'color') {
  background-color: @bg-value;
  & when (@gradientBg) {
    background: linear-gradient(90deg, @bg-value, @color2);
  }
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
.mbr-overlay {
  background: linear-gradient(90deg, @overlayColor, @overlayColor2);
}
.mbr-section-btn {
  margin-left: -0.8rem;
}
.text-content {
  padding-right: 1.5rem;
  & when (@reverseContent) {
    padding-right: 0;
    padding-left: 1.5rem;
    algin: left !important;
  }
}
.main-row {
  & when (@reverseContent) {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
  }
}
.mbr-text {
  color: #8d97ad;
  line-height: 1.5;
  algin: left !important;
}
.mbr-figure img {
  box-shadow: 0px 0px 0px rgba(115, 128, 157, 0.3);
  -webkit-box-shadow: 0px 0px 0px rgba(115, 128, 157, 0.3);
}
.counter-container {
  padding-top: 1rem;
  ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
    li {
      margin-bottom: 1rem;
      & when (@stylizedCounters) {
        list-style: none;
        &:before {
          font-family: MobiriseIcons !important;
          content: '\e966';
          position: absolute;
          left: 0px;
          padding-top: 2px;
          display: inline-block;
          text-align: left !important;
          margin: 4px 10px;
          line-height: 10px;
          transition: all .2s;
          width: 16px;
          height: 16px;
          font-size: 16px !important;
          font-weight: 500;
          background: none;
          color: @counterColor;
        }
      }
    }
  }
}
@media (max-width: 991px) {
  .main-row {
    margin: 0;
  }
  .mbr-section-title,.mbr-text,.list,.mbr-section-btn {
    text-align: left !important;
  }
  .text-content {
    padding: 0;
  }
}
.mbr-text,.mbr-section-btn {
  color: #656565;
}
.mbr-section-title {
  color: #98adc9;
}
.mbr-text,.mbr-section-btn DIV {
  text-align: left !important;
}
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

... hab hier in der @media nichts gefunden ...
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

und hier das HTML vom Block:

Code: Alles auswählen

<section class="features7" group="Features" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-fullscreen': fullScreen,
                    'mbr-parallax-background': bg.parallax}">
    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="0">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="3">

        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Subtitle" name="showSubtitle" checked>
        <input type="checkbox" title="Show Buttons" name="showButtons">
        <input type="checkbox" title="Show List" name="showList">
        <input type="checkbox" title="Stylized Counters" name="stylizedCounters" checked condition="showList">
        <input type="color" title="Counter Bg Color" name="counterColor" value="#188ef4" condition="stylizedCounters && showList">
        <input type="checkbox" title="Media on Left/Right" name="reverseContent">

        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value parallax>
            <input type="color" title="Background Color" value="#ffffff" selected>
            <input type="video" title="Background Video" value="https://youtu.be/iM-NestDPNQ">
        </fieldset>

        <input type="checkbox" title="Gradient" name="gradientBg" condition="bg.type == 'color'">
        <input type="color" title="Color 2" name="color2" value="#1ec5bf" condition="gradientBg&& bg.type=='color'">
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#21b968" condition="overlay && bg.type !== 'color'">
        <input type="color" title="Overlay Color 2" name="overlayColor2" condition="overlay && bg.type !== 'color'" value="#1ec5bf">
        
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.8" condition="overlay && bg.type !== 'color'">
    <!-- End block parameters -->
    </mbr-parameters>

    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity}">
    </div>

    <div class="container">
        <div class="row main-row">
            <div class="text-content mb-4 col-lg-6">
                <h2 class="mb-4 mbr-fonts-style mbr-section-title" mbr-theme-style="display-7" mbr-if="showTitle" data-app-selector=".mbr-section-title"><i style>Headline</i></h2>
                <h3 class="mbr-fonts-style mbr-text align-left mbr-light" mbr-if="showSubtitle" mbr-theme-style="display-7" data-app-selector=".mbr-text,.mbr-section-btn"><div>Lorem ipsum dolor sit amet,.</div><div><b>
</b></div></h3>
                <div class="list counter-container col-12  mbr-fonts-style mbr-black" mbr-theme-style="display-7" data-app-selector=".list" data-multiline mbr-article mbr-if="showList">
                    <ul>
                        <li>
                            Lorem ipsum dolor sit amet
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet
                        </li>
                        <li>
                            Lorem ipsum dolor sit amey
                        </li>
                    </ul>
                </div>
                <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn align-left pt-3" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-primary" href="index.html" data-app-placeholder="Type Text">Test</a></div>
            </div>
     
            <div class="mbr-figure col-lg-6">
                <img src="file:///C:/Users/AppData/Local/Mobirise.com/Mobirise/projects/project-2021-06-30_141334/assets/images/dummy-1200x800.jpg" alt="Produktion" title>
            </div>

        </div>
    </div>
</section>
Zuletzt geändert von inno am Do 8. Jul 2021, 16:36, insgesamt 2-mal geändert.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgrösse / Block

Ungelesener Beitrag von Tommy Herrmann »

... ich kann das in dieser CSS nicht erkennen. Das muss auch nicht in der CSS vom Block stehen, sondern kann z.B. auch in der CSS vom Thema stehen oder sogar in Bootstrap.

Da kann z.B. bei der class="container" oder auch class="container-fluid" ein padding eingetragen sein, das man verringern könnte oder sogar auf 0 setzen möchte.

Die class="mbr-figure" stellt das Bild eigentlich nur auf 100% und mittig. Das "padding" wird woanders gesetzt.

Code: Alles auswählen

.mbr-figure img {
  display: block;
  width: 100%;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  -webkit-align-self: center;
  align-self: center;
}
Welches Thema ist das und welcher Block ganz genau - vielleicht kannst Du einen Screenshot aus der Block-Ansicht machen.

ich habe aber heute kaum noch Zeit (erst morgen wieder).
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgrösse / Block

Ungelesener Beitrag von Tommy Herrmann »

Bootstrap setzt z.B. das hier für alle Blöcke:

Code: Alles auswählen

.container{
  width:100%;
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto
}
Du könntest z.B. dann mal den regulären Außenabstand ("padding" links und rechts) von 15px auf 5px (oder auch 0px) verringern und in den Bereich "CSS Editor" vom "Code Editor" des Blocks schreiben:

Code: Alles auswählen

.container{
  padding-right: 5px !important;
  padding-left: 5px !important;
}
Der Zusatz !important (wichtig) überschreibt eine gesetzte Class in jedem Fall...

... und somit diese Bootstrap-Class überschreiben (nicht getestet - nur auswendig angenommen).
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

... hab`s gerade getestet. Beim Text funktioniert es, aber da ist es OK. Nur das Bild hat den "grossen" Rand.
Ich arbeite mit dem MEDICAL M4 Theme. Der Block ist vom Business M4 Theme (siehe Bild).
Dateianhänge
bild2.jpg
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

... gelöst!

Das ist der richtige Code:

Code: Alles auswählen

.mbr-figure {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
Danke für dir Hilfe! TOP! :)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgrösse / Block

Ungelesener Beitrag von Tommy Herrmann »

... Doppeleins :tu:

... fängt an Spaß zu machen - oder ??? :)

... aber nochmals für "Mitleser". Es ist sehr schwer allgemeine Ratschläge zu geben, wenn man die CSS eines ganz spezifischen Blocks nicht kennt. Das kann bei Mobirise 4000 Mal anders sein.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Bildgrösse / Block

Ungelesener Beitrag von inno »

YEPP!
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 24 Gäste