Thanks for the link.
Yeah, that's what I was aiming for. The dividing line was moving left to start where the pink area started. Looks like I can fix that with media queries to limit the width of the pink area.
I probably shouldn't have called it an underline. I just wanted something to divide the heading from the section below. I used a pseudo element for the divider, but as mentioned by Dr John below, <hr> could also have done the job.
I have a heading with an underline that lines up perfectly so long as the heading occupies only one line.
However, when I change the screen width, the heading spreads across two lines. When this happens, the space before the lines of text gets extended and this affects where the underline...
I think I found the problem. I had an image in the footer that wasn't shrinking with its container. That image was 464px at its smallest.
I don't know why it also created a problem at 887px, but it seems to be gone now.
So my navbar wasn't actually shrinking. It was that the image in...
I thought I'd try a workaround where the banner appears in another file and I just push the navbar down to leave a blank space. I messed it up (banner now appears under the navbar).
Anyhow, when the navbar appears on top, it becomes the thing to shrink, with the banner always being 100%...
Using position:fixed in parent made the navbar and banner disappear, so I left the position as relative.
Using position:fixed in Banner made the banner disapppear (navbar was still there), so I had to use relative for that too.
Here's the code I ended up trying.
const Parent = styled.div`...
Hi everyone
I have a Bootstrap navbar and I'd like to add a banner above it. The Bootstrap navbar fills 100% of the screen width for all screen widths.
I've added a styled component to make a Parent div and a Banner div. These occupy 100% of the screen width most of the time, but at 887px...
Fixed it.
I put everything in this
const Parent = styled.div`
width:100vw;
@media screen and (max-width: 347px) {
display: grid;
width:100%;
`;
I'd also forgotten the "px" in my media queries for the inner and outer containers :s
There's grid layout in CSS, but I'm not sure if that's the same as grid bag layout.
Some components behave like they should. Others don't. I'm still trying to work out the difference between them.
Hi everyone
I'm making a mobile responsive page. It's pillarboxed for wider screens, so I'm holding everything in an outer and inner container. This works fine until the screen width is < 347px.
After this, it seems like the containers shrink. The dark background for the hero section...
I think it's private. It fits this description:
A 192.168.0.0 to 192.168.255.255 range, which is a 192.168.0.0 network masked by 255.255.0.0 or /16
Is there any way for me to test my page on a phone? I'd like to test if I can click on a phone number to make a call.
Hi everyone
I'm trying to test a locally hosted website on my phone, but it won't load. I typed "ipconfig" into my cmd to get the IP address and then entered [IP_Address]:[PORT] into the browser. I've tried this a few times and all it says is "[IP_Address] took too long to respond". I've...