Question about container and sizes

[purge08]

After my navbar on desktop and large devices I want to make 20% floating on the left to show top 8 products sold and float on the right #myCarousel on large devices. But on small devices such as iPhones or tablets to have the #myCarousel on top with top 8 sold product list going down below the carousel. How can I do this? I have script for the carousel, but need help on how to make script for the top products as text highlighted as if a href with hover of product image. Plus how to make a table to pull that data into it for showing those products.

[gw1500se]

Javascript screen.height and screen.width will give you the measurements regardless of device type. From that you can calculate how you want to distribute the screen real estate. Pass that info back to PHP via Ajax and set up the output as desired.

[ginerjm]

This really is a question for a CSS forum, don't you think?

[requinix]

There really ought to be a good, clean CSS answer to this.

[purge08]

I am looking in regard to Php code. Not css. 

[gizmola]

Porbably the best solution in this case is to use media queries

Here's an example that might help that targets phone sizes:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
    .logo img {
        width: 60px;
    }
	/* other css rules */
}

You can make alterations to the rules that drive the carousel using this technique, perhaps hiding it or doing something else.

[purge08]

So, basically using laravel might be better at accomplishing it?

[maxxd]

On 1/9/2020 at 6:24 PM, purge08 said:

So, basically using laravel might be better at accomplishing it?

No, using CSS will definitely be better at accomplishing it. You're talking about responsive web design, which is not accomplished with PHP. Stop trying to use a bazooka to kill a gnat.

Edited January 13, 2020 by cyberRobot