Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
Related
I am trying to design the first Book Now button of this page (https://www.bridgecitychrysler.com/book-service/) to overlap onto the white section below the hero image. Even though I have set the z-index incredibly high, it is not showing up in front of the section below.
If someone is able to figure this out just in the inspect tool, that would be great!
Thanks,
Looks like your .hero-widget css has overflow: hidden; set, disabling that seems to have made it visible!
Try removing position:relative from your button class.
This makes the button reappear, and then remove transform: translateX(-50%) from the a tag in the cta-container for proper alignment.
Use pointer-events:none for these type of situation, when click events is not working for overlapped content, use pointer-events:none
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
Hi I don't know how to solve this...
I want the element marked with a red rectangle in the images to move depending on the size of the screen ALIGNED to the containers below ALL THE TIME. I'm making a responsive website with the different media screen instances but I want to be sure that this element keeps in the same alignment all the time. How do I do that? No JS please.
http://www.awesomescreenshot.com/image/58399/669844960fdd9761084f64bae5d29112
since you haven't provided any code for what you have so far its difficult to help you. However, I think I understand what you need and you need to specify some width constraints to accomplish this:
you will need a container inside the header that will have the same width as the content below. Here is a working fiddle
css {
width: X%;
}
I'm incredibly frustrated by this and it would be a tremendous help if someone out there knows how to quickly figure this out...
What's happening is, I'm working on a site that seems to be extending out to the right of the body. In other words, overflowing to the right such that the horizontal scrollbar appears.
You'll see what I mean:
http://www.lahappy.com/blog/
This is killing me! Would really appreciate someone to call out what I may be missing or doing incorrectly.
Thanks-
The problem is within #fb-root in the right sidebar. If you remove this element, the layout will fit correctly without a horizontal scroll. The child iframe within this element has a width of 575px. You can change this value to auto by setting the style for the iframe in your css as:
#fb-root{
width: auto !important;
}
This line should be placed at the end of the CSS line to overwrite any styles which may disable the width:auto style. Ideally, you shouldn't have to use !important but since you need to override a FB defined style, I'd try it out.
Hope this helps.