Programmierung der Media-Queries auf HubSpot?

Guten Tag,

Bei WordPress ist es möglich, die Media-Queries der Elemente über das Design-Tool zu definieren. Dies scheint bei HubSpot nicht der Fall zu sein, und dies sollte über die CSS auf programmatische Weise erfolgen.

Gibt es einen auf dem Design-Tool basierenden Ansatz zum Ändern der Media-Queries?

1 Antwort

MasterFAQ

01.03.2024, 03:54

Hey!

Wenn du bei HubSpot die Media Queries für Elemente ändern möchtest, ist das nicht so simpel wie in WordPress. Hier musst du es über individuelles CSS im Design Manager machen. 🎨

Geh dazu einfach auf dein HubSpot-Dashboard und öffne den Design Manager. Wähle dann das Template aus, das du bearbeiten möchtest, oder erstelle ein neues. 🔧

Finde die passende CSS-Datei im Design Manager, in der du die Media Queries bearbeiten willst. Füge dann deine Media Queries direkt in die CSS-Datei ein. Zum Beispiel:

css
@media screen and (max-width: 600px) {
    /* Deine Stile für Geräte mit einer Breite von 600px oder weniger */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* Deine Stile für Geräte mit einer Breite zwischen 601px und 1024px */
}

Speichere die Änderungen und vergiss nicht, sie zu veröffentlichen, damit sie auf deiner HubSpot-Website aktiv werden. 🚀

Mit dieser Methode kannst du das Responsive Design deiner HubSpot-Website nach deinen Wünschen anpassen. Beachte, dass Anpassungen je nach Template variieren können, also teste sie auf verschiedenen Bildschirmgrößen. Viel Erfolg! 👍

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

Wieso sieht die Wordpress-Preview so anders aus?

Hallo,

ich habe frisch Wordpress installiert und kenne mich noch nicht so aus.

Im Admin Interface unter Design->"Neues Theme hinzufügen" suche ich nach Blog Themes, doch die Vorschaubilder sehen komplett anders aus.

Ich denke nur das CSS lädt. Wieso ist das so? Wie bekomme ich hin das die Websiten wie in der Vorschau geladen werden?

Vielen Dank!

(links oben, gelb Vorschau, rechts Live Preview...)

...zur Frage

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zur Frage

WordPress oder CMS gleichzeitig zu HTML,CSS,JavaScript lernen?

Moin,

Habe ein paar Fragen.
Übernehmen CMS das selbständige erstellen von HTML,CSS,JavaScript etc?
Macht es sinn, sich CMS nebenbei auch anzuschauen, bzw. dass ganze mit HTML,JavaScript lernen zu verbinden?
Und die letzte Frage ist, ist alles mit solchen Baukästen möglich? Oder gibt es grenzen die wirklich nur mit selbst erstellter Programmierung also z.B. durch JavaScript funktioniert?

...zur Frage

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zur Frage

App-StartUp ab wann Investoren?

Hallo, ein kleines Team und ich sind dabei, eine Social-Media-App zu erstellen. Bisher haben wir:

Design (wie die App aussehen soll) -> exakte Angaben
Logo (wurde professionell entwickelt)

Im Prinzip fehlt lediglich die Programmierung.

Das Problem: Wir haben bislang sehr viel Geld investiert und die Programmierung übersteigt unser Budget.

Also brauchen wir einen Investoren:

Wo finde ich Investoren / wie läuft das ab?
Reicht der Fortschritt aus, um einen Investoren zu finden ODER benötigen wir einen Prototypen?

...zur Frage

Html Css @media Grammatik?

Das Schlüsselwort media kann in css-Files z.B. wie folgt angegeben werden:

@media screen and (max-width: 1000px) {
 .column {
   width: 50%;
 }
}

@media screen and (max-width: 600px) {
 .column {
   width: 100%;
 }
}

Geht das evenuell auch so, bzw. konkret: wo findet man die entsprechende Grammatik definiert?

 .column {
@media screen and (max-width: 1000px) {
   width: 50%;
}
@media screen and (max-width: 600px) {
   width: 100%;
}
}

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

Elementor Responsive schmeißt sich zusammen?

Hallo ihr Lieben,

meine Deskopseite ist top.

Sobald ich allerdings auf responsive gehe, hat sich einiges zusammen geschmissen oder ist nach oben verrutscht und ich komme nicht dran.

Meine Menüleiste ist oben auch weg.

Wie kann ich alles individuell fixieren und bearbeiten/verschieben?

Liebe Grüße

...zur Frage

Html frameset auf allen Unterseiten übernehmen, wie?

Ich möchte das Logo und das Menü und die informationen ganz unten auf alle anderen unterseiten verwenden.

Wie mache ich das am einfachsten?

...zur Frage

Wer kann mir einen guten Website Builder empfehlen?

Ich möchte gerne für eine kleine karitative Stiftung eine Website gestalten. Dazu suche ich einen guten Website-Builder.

Die Rahmenbedingungen sind:

Eigenes Hosting ist gesetzt. Squarspace & Co fallen also aus
Wordpress als CMS ist ebenfalls gesetzt. Will der Kunde.
Programmierung kommt nicht in Frage: Ich muss alles selbst machen und kann kein html/css. Es muss ein Builder sein. Ich bin Designer.
Builder gesucht: Was gibt es denn, das ich auf ein vorhandenes Wordpress aufsetzen kann und mit dem ich einfach eine schöne Website zusammenflicken kann?
Es muss ein Builder oder Template oder Theme sein, da mir die Basismöglichkeiten von Wordpress nicht genügen.

Bitte schreibt mir, wenn ihr mir zu den o.g. Rahmenbedingungen aus eigener Erfahrung Empfehlungen geben könnt. Gerne auch mit Weblinks zu Projekten, die ihr gemacht habt.

Bitte schreibt mir nicht mit Rercherchetipps. Hilfe beim Googeln brauche ich nicht ;-) Bitte schreibt mir auch nicht, wenn um mit von anderen CMS zu überzeugen, doch für Fremdhosting zu begeistern, ich solle ne Webagentur beauftragen, etc. Ich suche wirklich eine konkrete Empfehlung aus eurer eigenen Erfahrung.

...zur Frage

Media Queries im iFrame nutzen

Hallo,

folgendes möchte ich bewerkstelligen:

Ich möchte eine responsive Seite in einem externen iframe einbinden. Ich habe KEIN Zugriff auf das iframe, sondern wirklich nur auf meine Seite die in diesem liegt. Das iframe hat eine feste Größe und ist nicht änderbar oder im vorstehenden code zu manipulieren.

Jetzt möchte ich gerne, dass sich einige Elemente auf meiner Seite im liegenden iframe je nach Größe des Browserfensters verändern.

Gibt es überhaupt ein media querie Befehl welches das tatsächliche Browserfenster beachtet und nicht zwangsläufig die iframe Größe (die ich nicht verändern kann)?

bisher getestet:

@media (min-width:450px) and (max-width:900px) { #main_wrapper { background-color: #FF0000 !important;} }

oder

@media only screen and (max-width : 900px) { #main_wrapper { background-color: #FF0000 !important;} }

Vielen Dank im Voraus.

Grüße Tim

...zur Frage

Sollten Websites ohne Javascript funktionieren?

Ich habe eine Website, welche aber ohne JS gar nicht funktioniert. Fußzeile, Kopfzeile, all das habe ich mit Javascript eingefügt, weil ich den Inhalt so, je nach Bildschirmgröße verändern kann. Das Problem ist: so funktioniert ja quasi nix ohne JS. Ist das schlimm? Denn Javascript kann man ja im Browser deaktivieren wodurch dann ja quasi nichts auf meiner Website funktioniert. Wie viele Menschen deaktivieren JS eigentlich?

Ich hoffe auf Antworten,

Bohne47

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen