Hi, I’m using the Agency template from Bootstrap 5 Blocks. I’m trying to layer a couple images (the logo over top of a graphic). The graphic is set to “fluid” so it matches the screen resolutions. Unfortunately, when I make the graphic “fluid” the logo is no longer in the correct place. It moves up under the menu. I moved it down to a better location but when I test different browser sizes (i.e. smaller browser sizes) the position of the logo shifts up under the menu again. If the graphic is not set to “fluid” I don’t have this problem, but the graphic is too big for the screen resolution resulting in scroll bars at the bottom of the browser. How can I set the logo to be “fluid” and stationary so it doesn’t shift position under the menu? Thanks in advance. I love Pinegrow!
Welcome to the forum! I think this question is too difficult to answer without seeing the source code and CSS you are using. If you could take some screenshots of the elements and CSS assigned to them (or better yet a video) then someone may be able to help. -Best!
Hi Benjamin,
Thanks for your response. I’ve created a video and uploaded it to my DropBox account. The link is below. If you’re not familiar with DropBox you don’t need an account. It will prompt you to create an account but you can just close that prompt and play the video. Thanks again!
Ok, so in short, you’re asking too much of Bootstrap. Bootstrap is really just for the rapid development of applications and basic websites. When you start trying to build more complicated elements like your hero section BS will fall down.
The best thing you can do is add your image as a true background image via CSS on the wrapper of the hero. Or you can also use CSS grid to stack the elements on top of each other. The video never game me a clear view into your HTML structure so I can’t recommend an exact solution, but if you venture away from BS and go for custom CSS you should be able to sort this out quickly. -Best
Hi Benjamin,
Thank you for the explanation. Two follow-up questions:
Originally I developed all the pages using BS4 with CSS Grid. Then when I tried to make the pages responsive to various devices, and made necessary layout changes it messed up all the layouts on all the pages. I mean when I made a change to one page, other pages were affected. This is because all the pages were in one folder and therefore all shared the same style sheet file (i think). . . So, is there a tutorial that shows how to do multi page projects, using CSS Grid, where each page has a different layout, and each page is device responsive?
Regardless of the images etc… can I use BS5 Blocks, without CSS Grid, with different layouts, for different pages, that are device responsive?
It’s hard to say exactly without looking at how you set up your project, but I believe the solution you are looking for is to assign a different class name to different pages so that you only update the CSS for that class (and potentially child classes) without affecting other elements. The folder location of your items and CSS is not relevant. I believe what you are describing is “CSS bleeding”. This happens when elements share the same class name (whether custom or a BS class) and changing the CSS for one element has adverse effects on other elements. There are a lot of solutions to this issue, but the easiest is to create unique class names for elements so they are unique among other elements.
Yes, you can continue to use BS5 blocks (which are just a group of HTML elements with BS classes on them) and you can also add new classes to those individual blocks which allow you to further customize them.
Overall, I think you just need to get more familiar with CSS. There are tons of free intro courses online which can help you grasp the fundamentals better, and then you will find all this much easier to implement.
Hi Benjamin,
Thanks for your input. I’ll keep playing around with BS5 Blocks. Looks like it should work for what I’m doing. I should probably take a course in web development. Thanks again.