Probleme mit der Logo ausrichtung

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Gismo_74

Neues Mitglied
15 Juni 2018
7
0
1
47
Hallo Zusammen

Ich habe bei Jimdo meine Geschäfts Hompage irgendwie zusammengebastelt.

Leider ist in der Standard Variante alles sehr unschön bei Jimdo. Mein Logo war viel zu gross !

Ich habe das Logo soweit verkleinert, das problem ist nun aber,dass sich der Text ab einer gewissen breite in das Logo hineinschiebt bevor es zur Responsiven Ansicht wechselt. nur wie behebe ich das ?
Logo schiebt sich in Text.JPG
 

Gismo_74

Neues Mitglied
15 Juni 2018
7
0
1
47
habe hier mal das Script

<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.jtpl-logo a img {
max-width:900px; !important;
margin-left:-90px !important;
margin-right:-90px !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-logo img {
width: 300px;!important;
margin-left: -5px !important;
position: absolute;!important;
height: 120px;!important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.j-website-title-content {
font-weight: normal;
font-style: normal;
color: #000;
font-family: "Roboto Slab",serif,"google";
font-size: 42px;
text-transform: none;
text-align: end;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){
/*Logo responsive*/
.j-website-title-content {
font-weight: normal;
font-style: normal;
color: #000;
font-family: "Roboto Slab",serif,"google";
font-size: 45px;
text-transform: none;
text-align: center;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.jtpl-title {
background: white;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.cc-imagewrapper img {
display: inline;
left: 1px;
max-width: 100%;
top: 30px;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px){
/*Logo Bildschirm*/
.j-website-title-content {
line-height: 100px;}
/*]]>*/
</style>


<style>
/* <![CDATA[ */
.cc-product-variant-selectbox {
background-color: #F2F2F2 !important;
height:60px;
font-size:18px;
}
/*]]>*/
</style>


<style>
/* <![CDATA[ */
.j-product .cc-shop-product-desc .cc-shop-product-price-current {
color: #000000;
font-size: 32px;
line-height: 1em;
font-weight:bold ;
}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/

.j-hr hr {
border-style:solid;
border-color: #000000 ! important;
border-bottom-width: 1px;
border-style: solid;
}

/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
@media (max-width:768px){

.jtpl-main {
color: #212121;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 2.5;


/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/


.jtpl-main {
color: #212121;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 2.5;


/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.j-cart-hover-popup {
position: relative;
color: #fbfbfb;
background-color: #222;
background-color: rgba(247, 2, 2,);
-webkit-transition: all 100ms ease;
transition: all 100ms ease;
}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
#cc-checkout-steps .cc-checkout-steps-current {
opacity: 1;
background-color: #222;
background-color: rgb(251, 0, 0);
border-color: #222;
border-color: rgba(51,51,51,.85);
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.jtpl-navigation__label {
transition: left .3s;
border-bottom: 0;
cursor: pointer;
position: absolute;
padding: 17px;
text-align: center;
text-decoration: none;
top: 0;
background-color: rgb(247, 2, 2);
float: right;
z-index: 1000;
right: 0;
width: 26px;
height: 14px;
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/

.j-search {
border-style:solid;
border-width:1px;
color:#000000 !important;
border-color:#000000;
background:rgb(214,211,211);
}

/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.jtpl-cart .j-cart-icon {
background-color: rgba(247,2,2);
padding: .10em .9em;
}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.j-cart--hover-popup, .j-cart-icon {
position: relative;
color: #fbfbfb;
background-color: #7b7a7a;
background-color: rgba(247, 2, 2,);
-webkit-transition: all 100ms ease;
transition: all 100ms ease;
}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.j-search .j-search-content input[type="text"].j-search-input {
padding-left: 40px !important;
border-color: #eee;
color: #000;
}

/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.content-options .j-comment textarea, .content-options .j-comment input[type="text"], .content-options .j-comment input[type="date"], .content-options .commententry textarea, .content-options .commententry input[type="text"], .content-options .commententry input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="text"], .content-options .j-formnew .cc-m-form-view-sortable input[type="date"], .content-options .j-formnew .cc-m-form-view-sortable input[type="email"], .content-options .j-formnew .cc-m-form-view-sortable textarea, .content-options .j-formnew .cc-m-form-view-sortable select, .content-options .j-newsletterbox input[type="email"], .content-options #cc-checkout-gutter input[type="text"], .content-options #cc-checkout-gutter input[type="date"], .content-options #cc-checkout-gutter input[type="email"], .content-options #cc-checkout-gutter textarea, .content-options #cc-checkout-gutter select, .content-options .j-googlemaps .cc-map-route-start, .content-options .j-checkout__input-field {
border-color: #000;
color: #000;
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-3 .cc-product-title, .cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-3 .cc-product-title {
margin-bottom: 45px;
text-align: center;

}
/*]]>*/
</style>




Klar hatt es in diesem Script noch fehler drinn, aber ich kenne mich mit CSS und HTML einfach nicht so aus. Deshalb habe ich auch ein Baukastensystem wie Jimdo gewählt. Von Jimdo selbst gibts leider keine hilfe, sobald man da ein eigenes layout verwendet.

Hoffe Ihr könnt mir da weiterhelfen oder einen typ geben wo der fehler liegt,dass es mir den Text ins Logo hinein schiebt. In der Responsiven Ansicht ( Smartphone ) da passt es ,nur halt eben in der Desktop Ansicht nicht.
 

m.scatello

Senior HTML'ler
15 Februar 2017
1.617
187
63
Ich glaube nicht, dass du hier großartige Hilfe erwarten kannst, denn mit so einem Käse wie Jimdo beschätigt sich hier niemand ernsthaft.
 

basti1012

Senior HTML'ler
26 November 2017
1.645
174
63
Minden
basti1012.de
Ohne das HTML kommt man auch nicht weit.
Die ganzen festen Werte Position: absolute/relative Margin:90px u. v. m. helfen dir für responsives Design auch nicht wirklich weiter.
Ich weiß nicht wie weit du bei Jimdo eigene CSS benutzen kannst usw. , aber Flexbox wäre hier der bessere weg.
Deine CSS die du gepostet hast , hat auch mehr Einträge als nötig