Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Opgelost css voor mobile only

bewerkt wo 21 okt 2015 in Stylesheets Posts: 879
Ik probeer de foto's van de categorie iconen en profielfoto's links naast de comments te verwijderen op mobile device met deze code:

@media only screen and (max-device-width: 480px) {
img.ProfilePhotoMedium, img.category_icons {
display: none !important;
}
}

Maar blijkbaar gebeurt er weinig....
Code is toch correct?
Getagd:

Reacties

  • PMPosts: 732


    a.PhotoWrap{display:none}
    .MessageList .Item{margin-left:0}
    If it's not fun, you're not doing it right!
  • bewerkt do 22 okt 2015
    PMPosts: 879
    ??
    Ik zie nog steeds niets veranderen.
    Het gaat toch om de categorie iconen op de homepage en de avatars van de users?
    Wat heeft .MessageList er dan mee te maken?

    Dit zou de iconen en de avatars moeten laten verdwijnen op mobile maar gebeurt niet

    @media only screen and (max-device-width: 480px) {
    img.ProfilePhotoMedium, img.category_icons {
    display: none !important;
    }
    }

    of zoals jij de eerste optie aangeeft:

    @media only screen and (max-device-width: 480px) {
    a.PhotoWrap, img.category_icons {
    display: none !important;
    }
    }





  • bewerkt do 22 okt 2015
    PMPosts: 732
    Alles staat in de lijst in een li Item ItemComment
    In de ul MessageList zetten ze item op margin-right:64px
    de a PhotoWrap (gebruikers icon, avatar) staat op position:absolute left -65px

    Dus als je de a PhotoWrap op display:none; zet en je geeft de MessageList margin-right 0 dan moet de afbeelding weg zijn.

    Probeer anders alleen eens die margin-right op 0 te zetten en kijk wat er gebeurt.

    Trouwens de img moet niet worden weergegeven, maar de gehele a tag

    Ook even opletten of de style als laatset wordt geladen!
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    Ik heb dit nu staan maar ik krijg het op mobile only niet gefixed:

    @media only screen and (max-device-width: 480px) {
    a.PhotoWrap{
    display:none
    }
    .MessageList .Item{
    margin-left:0
    }
    }
  • PMPosts: 732
    Ik weet niet waar je dit doet laden, maar er staat nog altijd:


    .MessageList .Item-Header .PhotoWrap, .MessageList.Conversation .Meta .PhotoWrap {
    position: absolute;
    top: -1px;
    left: -65px;
    }

    Het gene wat je vermeld zie ik nergens terug komen in de css
    Dit moet je in de custom.css?v=2.1.9 laden, want dit is je laatste style die wordt geladen, dus daar overschrijf je de standaard!
    If it's not fun, you're not doing it right!
  • bewerkt ma 26 okt 2015
    PMPosts: 879
    geen enkele style verandering wordt meer doorgevoerd in bootstrap. Hmm...geen idee waarom niet. Kan ook niet meer switchen van style in het dashbord. Dus ff uitpluizen wat hier aan de hand is
    Edit: is een of andere plugin die veranderingen in styling niet meer doorvoert; (als alle plugins disabled voert ie de styling wel door) ;nu ff checken welke plugin dit doet
    Edit 2: boosdoener gevonden; staat nu op disabled. Nu wordt de styleverandering wel doorgevoerd. Vlg mij is ie mobiel nu oke??
  • PMPosts: 732
    Klopt maar nu zit je met beste antwoord, deze doet zelfde als je avatar van gebruikers.

    If it's not fun, you're not doing it right!
  • bewerkt ma 26 okt 2015
    PMPosts: 879
    oke dan zet ik die voor mobile ook op display none of ik moet de images voor mobiel laten slinken in width en height...ff wat mee stoeien
    Edit Ik heb nu de best answer classes een background-size van 20 px bij 20 px gegeven
    Kan zelf niet goed testen op mijn phone omdat het ding tergend traag is..maar desgewenst als nog te groot is disable ik ze helemaal
  • PMPosts: 732
    Image kun je responsive maken door in img de class img-responsive te plaatsen.

    Best answer zoergt voor veel verloren ruimte.
    denk dat je de position moet veranderen in mobile dat hij bv nog maar 10px groot is en precies voor de gebruikersnaam komt te staan.

    Je kunt veel ruimte krijgen door bv. die browser icon en ip adres te verwijderen.
    hihi ik weet ook wel dat ik met ff werk ;)
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    Ja ik zal die useragent eens uitschakelen(browsericon) en het ip adres ook. Ip adres is overigens voor normale members niet zichtbaar, alleen voor Admins en Mods. Als je browser wilt weten kun je dat idd altijd nog wel vragen mocht een member een probleem hebben met crossbrowser compatibility. en dan wat schuiven met die mark V
  • PMPosts: 732
    Hier nog wat aanpassingen vor mobiele only:


    ul.Discussions li img, img.ProfilePhotoMedium, #JumpToTop{display:none !important}
    .navbar-toggle{margin-right:0px !important}
    .ItemDontent.discussion{margin-left:0px !important}
    .Pager span, .Pager a, .Buttons, .Buttons .Button{margin-bottom:10px !important}
    .Buttons .Button{display:block;width:100%}
    nuet
    If it's not fun, you're not doing it right!
  • PMPosts: 732
    Worden niet geladen, helaas.
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    nu moeten ze toch geladen worden; ik zie althans de buttons volledig width en de jump to topbutton is weg
  • PMPosts: 732
    Nog even deze en het moet goed zijn.


    .MessageList .Item, .MessageForm{margin:0 !important
    nuet
    If it's not fun, you're not doing it right!
  • PMPosts: 732
    Yep werkt beter, hier en daar zijn nog wel wat kleine aanpassingen maar het is een stuk prettiger werken (lezen).
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.