How can i solve the issue

HTML-CSS
1

I recently discovered a tutorial on YouTube from someone who makes a website that also contains a section where you can scroll through some items for sale, but the problem is the following if I zoom out when I’m on the site and for example I zoom in and a product appears below the others, I attach a screenshot to understand what the problem is. I’m at the beginning and I don’t have the slightest idea how I could solve this, I’ve actually tried all the options. Sorry for my English. And If i zoom out, the products will be restored on a single row again. Can someone help me? the code is in the title

2

please write an actual title, and put the code in the body of the post, it is not clickable in the title.

You should also add a precise list of steps to reproduce your issue

1 Like
3

Actually the code is to bigger

https://github.com/codeharvestguide/files/tree/main/Source%20Code/eLife

I can t modify the title because I don t know how to do it

And the issue is:

  1. When I have the site zoomed out and reload the site the product container appear on 2 lines and I can move them by sliders but I want them only in 1 line don t care if the google is zoomed 65% or 100% or 125% you know what I wan t to say, and for the mobile version I want the same thing
4

there is a pencil icon near the title

5

just delete this topic i can t modify anything, idk why :frowning: i will made other topic with the title and informations

6

you may need to use the forum more to unlock that ability.

but, no, deleting a topic to recreate it immediately after is skirting the no-duplicate-topics policies

7

Okey, I will type here the rest of my problem and i m trying to unlock the ability to edit a title.

https://github.com/AlexandruSAN/sitetest2 i Here is the site I’m talking about, I have that product section that appears on 2 lines in case I have the page zoomed out and I zoom in more, basically 2 lines of products are created, I combined the code I wrote with the code in the link above in the comments and I actually don’t know how I can solve the problem, the products should be displayed on a single line regardless of whether I zoom in, refresh the page or anything else related to this.
I can t post source code because is bigger than the site let me, sorry guys but I need help

8

Can you please explain a bit more clearly? I don’t think I understand the issue?

You can try following this format:

step 1: go to ___ section of the site
step 2: see that ___
step 3: zoom in/out and see that ___

What should happen instead:
When you follow step # you should see ___

9 
https://youtu.be/NpFX5Ihpt4Y

I made a video with the problem, in the first part of the video is my site, I combined its code with the code of the guy I found to make a product page but as it appears in the video, there are those problems, another line with one or more products appears depending on the zoom on the second page, and on the other site when I changed to the top, when I refresh everything appears normally, even if when you zoom in a lot 2 lines appear, it wouldn’t be a very big problem, the biggest problem is the first part of the video when the tourist site appears. I hope now it s ok :frowning:

10

Any ideea guys? I really need help

11

Your repo doesn’t contain the same files as in the video. Also, the CSS linking isn’t correct in the repo HTML file.

I would assume the site is using Bootstrap and the grid is handled by it. That, or the owl carousel library.