0

tengo un proyecto con laravel 6 y estoy intentando hacer un diseño responsive muy simple para eso tengo este layout con estos archivos.

El layout principal donde cargo las distintas secciones es este

<!doctype html>
<html>
<head>
    @include('includes.user.head')
</head>
<body>
<div class="container">

    <header class="row" style="background: #343a40">
        @include('includes.user.header')
    </header>

    <div id="main" class="row">

        @yield('content')

    </div>

    <div>
        @yield('script')
    </div>

    <footer class="row">
        @include('includes.user.footer')
    </footer>

</div>
</body>
</html>

Luego tengo los distintos includes como el "include.user.head" donde cargo todas las librerias (jquery , font-awesome, ...)

Y luego tendria una plantilla blade que tiene esta estructura

@extends('layouts.user')

@section('content')



<div id="diet-list">
    <div class="form-group">
        <h1 class="mt-3">Inicio</h1>
    </div>
     
	 Página de pruebas
</div>
@endsection

Esto me funciona, el diseño se adapta bien a la pantalla del PC pero si lo miro desde mobile no. Por eso motivo pido ayuda.

Gracias.

1 respuesta 1

1

Lo que te hace falta ya no es de laravel sino de frontend, específicamente bootstrap. Necesitas irle dando a tu plantilla cuantas columnas va a ocupar cada cosa según la resolución de la pantalla (col-lg-2) e ir haciendo los media queries.

Saludos!

2
  • Gracias por la respuesta, la verdad que en temas de frontend voy algo justo, me podrías pasar un enlace de un ejemplo para lo que me comentas? gracias
    – ilernet
    Commented el 2 may. 2020 a las 9:11
  • 1
    Con la documentación de bootstrap vas a comprender lo de las 12 columnas o consigue un curso de bootstrap, yo también para maquetado no soy muy bueno y se lo paso a quien si sabe, la verdad me da flojera el maquetado.
    – Mundoco
    Commented el 5 may. 2020 a las 0:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.