Jump to content

Question about container and sizes


purge08

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by cyberRobot
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.