Responsive Elemente in Wordpress

Question

Hallo ich habe Probleme und könnte wirklich etwas Hilfe nutzen.

Ich benutze Visual Composer für Wordpress und das kostenlose Geräumige Thema, um meine Website zu bauen, und ich habe benutzerdefinierte CSS verwendet, um die Navbar, fb-Logo und Broschüre/PDF-Symbol zu bewegen.

Die fb und Broschüre/PDF-Symbol sind zwei rohe HTML-Elemente am unteren Rand der Seite und ich gab ihnen Klassen und bewegt alle Elemente, navbar, fb logo, pdf-Logo, Produktkategorien Titel manuell mit CSS

Aber wenn du den Bildschirm heranzoomst oder verkleinert, oder auf die Drop-downs auf den Bildern schwingst, springen sie woanders hin. Kann mir jemand sagen, wie man sie reaktionsfähig macht, damit es auf allen Bildschirmgrößen gut aussieht, sogar mobil ohne zu springen?

Oder weiß jemand einen einfacheren Weg, es zu tun? Ich kannte keine andere Möglichkeit, sie an diesen Stellen zu bekommen.

Website: http://www.corebusinesssa.co.za/Test/

Edit: Drop-Down gelöst, aber nicht die schrumpfende Bildschirmteil

Heres mein css

.main-navigation { 
padding-right; 5px; 
} 
.main-navigation a { 
color: black; 
position: relative; 
top: -35px; 
right: 200px; 
} 

.fbicon { 
position:relative; 
top: -845px; 
right: -1200px; 
} 

.pdficon { 
position:relative; 
top: -695px; 
right: -1190px; 
} 

.pdficontext { 
position:relative; 
top: -650px; 
right: -1070px; 
color: #0e4776; 
font-weight: bold; 
} 

.contactusheader { 
position:relative; 
top: -980px; 
} 

.productcategoriestitle { 
position: relative; 
top: 50px; 
} 

Answer 1

Die der Drop-Down-Menü relativ positioniert sind, so dass sie vermasseln die Laien -out, wenn sie erscheinen.

Wenn Sie sie absolut machen würden, wäre kein anderes Element betroffen.

Sie könnten also versuchen, die Position der Dropdowns zu ändern. Ad z-index, damit sie oben in der Fußzeile erscheinen.

.dropdown-content 
{ 
    position: absolute; 
    z-index: 1; 
}