Mala pomoć u CSS-u mislim?

Programiranje
1

Dizajn ili code?

Ne znam gdje da smjestim temu, pa sam se odlučio za kod. Dakle radi se o WP-u i jednom widgetu koji pokazuje određene titlove unutar posta.
Ja bih htio da u slučaju da je rezolucija uređaja 360px i manja nema tog widgeta nikako. A u ostalim slučajevima da radi kao i do sada.

@media only screen and (max-width: 360px) {
    .widget {
        display: none;
    }
}

To je kod koji bi trebao da odradi stvar, ako sam dobro skužio. Gdje da ga stavim? U CSS aktivne teme ili u CSS widgeta? Dali se ovdje radi o nekoj petlji pa da se trebam igrati zagradicama, ili je dovoljno staviti kod kakav jeste u određenu datoteku?

Zahvaljujem…

2

Ako ne mora biti isključivo css rješenje, sa js se to da lako rješiti.

 function() {
    var width = $(window).width();
    
    if(width <= 360){
    	$(".widget").hide();
    	}
 	
    if(width > 360){
    	$(".widget").show();
    	}	
    	
    }
1 Like
3

Zasto sa JS ako moze sa CSS, i jednostavnije.

@komentar ovaj tvoj kod je dobar, no on ce sakriti bas sve widgete na tvom sajtu, na rezoluciji manjoj od zadane. Ako ti je to ok, samo ga dodaj na kraj style.css datoteke kojoj mozes pristupiti kroz Appearance -> Editor

1 Like
4

Svejedno je gdje ga staviš dok se oba CSS fajla učitaju. Ali ako već nešto radiš gledaj da ti je lijepo smješteno. Nađi class widget u css fajlu i stavi ispod njega. I ako već koristiš neki naziv koristi nešto kao .widget_naziv, da kasnije možeš lakše to pronaći, a i widget kao widget je po defaultu tako da ti nekad može praviti probleme ako dodaš neki drugi plugin ili nešto.

1 Like
5

U biti i koristim naziv widget_nesto
Tu sam za primjer stavio widget. Pokusat cu pa javim rezultat.

Hvala svima na odgovorima.

6

Bas kako dole kazu, bolje je rjesenje css pa sam se vodio tom logikom (tako pisu po netu).

Hvala svakako. :smile

7 
@media only screen and (max-width: 400px) {
    .post-widget-****** {
        display: none;
    }
}

Još jednom da javim i da zahvalim :smile:
kod radi. Stavio sam da se ne pokazuje na 400px i manje jer je sama širina tog DIV elementa fiksna 200px.
Ovo sam pokušavao i prije no nije mi kod radio! Zbog čega? :blush: problem je bio što sam kod pokušavao pokrenuti unutar CSS datoteke teme koju koristim, a u biti sam trebao CSS od plugina koji aktivira mobilni prikaz …

8

Zato jer neki browseri, ie 8 i nize cini mi se, ne podrzavaju media queries. Osim ako nije bitno tih 2 i kusur % usera.

9

Istina, ali za takve browsere ti niti ne treba taj query jer znas da sigurno nije desktop rezolucija manja od navedene.