Pracuję nad Fiddle, który działa doskonale w widoku na pulpicie.

Widok na pulpit działa w sposób, który na kliknięciu dowolnego 2 elementów produktów (domyślnie pozostały wybrany) , pole opisu zostanie wyświetlone na dole, podając szczegółowe wyjaśnienie tych produktów.


.. Fragmenty kodów CSS, których używałem do widoku mobilnego:

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;    padding-right: 3.91%;
  }
}


.. Oświadczenie o problemach:

W trybie mobilnym jest jeden mały problem. Problem polega na tym, że widzę wyjaśnienie obu produktów produktów, podczas gdy należy wyświetlać tylko bez zmiany tego wyglądu I.e. Przedmioty powinny pozostać ułożone .

Chcę, aby obiekt mobilny pracował dokładnie w pewien sposób, jak w widoku pulpitu I.E. Gdy klikamy jeden element produktu, pole opisu powinno być wyświetlane na dole i po kliknięciu innym elementem produktu Innym opisem opisu powinien wyświetlić na dole.

Powodem, dla którego użyłem Wyświetlacz: Inline-Block! Ważne Ponieważ chcę, aby przedmioty gromadzą się pionowo w trybie mobilnym w HTML / CSS. Usunięcie, które sprawi, że obrazy i tekst zostaną zgniecione.

2
flash 4 czerwiec 2018, 10:18

4 odpowiedzi

Najlepsza odpowiedź

Dzieje się tak z powodu ustawionego display: inline-block !important; dla div.franchisehubtv i div.cloudbasedtextipad w @media only screen and (max-width: 767px), która override Twój display: none; CSS.

Rozwiązanie nr: 1

Możesz usunąć te klasy z zapytania o media, więc twój @media będzie taki

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label  {
  display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
   flex-direction: column;
 }
.tv img {
   max-width: 100%;
   height: auto;
  }
}

Rozwiązanie nr: 2

Musisz zastąpić te css, dodając te linie

div.franchisehubtv[style="display: none;"] {
    display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
    display: none !important;
}

Zaktualizowano skrzypce Oto

Aktualizacja : Możesz ustawić układ za pomocą flex dla małych urządzeń

1
Zuber 4 czerwiec 2018, 07:56

Patrząc na twoje obecne rozwiązanie, drugi div ma regułę stylu, która jest wywołana poniżej 767px, która wymusza go do wyświetlenia jako blok inline. Dodając ważną deklarację, a następnie zastępuje inną deklarację nieruchomości.

Jeśli usuniesz tę zasadę, otrzymasz uszkodzony układ, ale div jest ukryty zgodnie z wymaganiami.

Jeśli chodzi o układ, treść w każdym div będzie potrzebować niektórych wyrafinowanych reguł flexbox, które mogą użyć tego samego punktu przerwania, aby przełączać się między kierunkiem kolumny lub wiersza:

flex-direction: column (for mobile)
flex-direction: row (for non-mobile)
0
sassquad 4 czerwiec 2018, 07:37

Jeden problem, który masz, jest dlatego, że ustawisz właściwość wyświetlania jako styl inline w HTML, więc musisz użyć important, aby nadpisać. Drugim problemem jest to, że nie masz w liczeniu display: inline-block na swoim jQuery.

Będziesz musiał zmienić kilka rzeczy, zmieniłem skrzypkę, aby uwzględnić te rzeczy, działa tylko wtedy, gdy klikniesz przyciski, na obciążeniu widzisz oba elementy, jest kilka sposobów, jakie możesz zrobić tylko te rzeczy, tylko ja Chcesz dokonać minimalnych zmian, aby pokazać wynik.

https://jsfiddle.net/zaefnson/2/

A na pulpicie prawdopodobnie też nie działa, tak jak powiedziałem, jest kilka rzeczy, które zamierzasz zmienić.

0
Ander 4 czerwiec 2018, 07:43

Nie zrozumiałeś cię wyraźnie, możesz określić, czy ten obiekt mobilny, który chcesz być tym samym wyświetlaczem na pulpicie? Jeśli tak, zalecam sprawdzenie, jak korzystać z systemu COOTStrap System i można użyć swoich CSS jako benchmarku.

0
briancollins081 4 czerwiec 2018, 07:26