I'm trying to increase the width of the searchbox in Shopify timber framework but having problems. The padding can be increased, but the input field stays the same size. Any suggestions will be greatly appreciated. Thanks!
The quick answer is to find .site-header__search in timber.scss.liquid (found in the assets folder) and remove the line max-width: 400px. This will let the search box take up 100% of it's parent width.
If you want to adjust it further than that, you can adjust the grid item sizes in the header. See the image below and notice the grid__item divs:
There you'll see large--one-half large--text-right medium-down--hide. large--one-half is what dictates the container size on your large breakpoint. Change that to something like large--two-thirds and it'll get wider — though be sure to also adjust the div right before it to large--one-third, otherwise your search grid__item will stack below your shop name/logo.
See the full Timber docs to get a better understanding of the grid as well.
Related
I'm running an online store on prestashop. I've already handled all of the necessary adjustments for images and videos and I'm working on minimizing loading time, however I've noticed that a lot of my CLS score comes from the main div containers on my product page
This seems to be the case with all prestashop sites, at least the ones I've tested with PageSpeed Insights. What would be a good way of handling this? Adding aspect-ratio doesn't seem to work plus it obviously breaks everything since the heights of these containers are dynamic. Adding min-height doesn't seem to be doing anything either.
Example product page: https://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html
WebPageTest has a useful Web Vitals diagnostic page where you can see the before/after of individual layout shifts. Two of the most significant shifts are when the breadcrumbs at the top load and push the product image down, and when the product image loads and pushes the rest of the content down:
The product image has a style of height: auto; width: 100%;:
<img id="itzoom-products" class="js-qv-product-cover" src="https://vipkoszulka.pl/10826-large_default/pielegniarka-koszulka-long-z-kieszeniami-medyczna.jpg" alt="" title="" style="width:100%;" itemprop="image">
So the browser doesn't know how much space to reserve for the image until it loads, causing the layout shift. You should set explicit height/width styles for the image so that the area can be reserved before the image loads.
Aside: the product image, which is also your LCP, has an intrinsic size of 1500px by 1300px, despite only appearing as 300px by 286px on mobile. A lot of bytes could be saved—potentially also improving your LCP—by using a smaller image!
Similarly for the breadcrumbs, if they're asynchronously added they should have space reserved by setting a height/width. It will appear blank until loaded, but as far as Web Vitals are concerned it would alleviate the CLS issues.
You can read more about CLS optimizations in this guide: https://web.dev/optimize-cls/
I am using Template10 with the Hamburger starting project template. I'd like to have a margin between the hamburger area on the left and all content. I tried changing the shared Shell.xaml page (by adding a margin, etc.) but couldn't figure out the best way to sort it out. Conceptually, that makes sense, but it's the specific detail of how to make it work that I'm missing.
Is there an easy way to do it without changing each content page?
Regarding the questions in the comments: I want it in the closed case of a wide view; the question doesn't make any sense in any other case. As far as what I tried, it doesn't really ultimately matter, since none of what I tried worked - I'm asking what the right way is to do it, which I never figured out.
Here's what the default looks like, without a margin:
Here's what it looks like with a margin added to the content area, which is also how the sample template contents handle this:
I don't want to have to mark up every content page with left margins to get the offset in the second picture.
1: https://i.stack.imgur.com/jUIuO.png
Okay, now I have enough information. You have a few options here. The first is just bite the bullet like the rest of the developer community and format your pages like normal. But if you simply must, you can create an implicit Page style with a setter setting Margin="16,16,16,16" but, listen, and I am not kidding, you will ultimately regret it unless your app is super-simple. The biggest problem will be the spacing will be OUTSIDE the containing ScrollViewer.
Thanks for using Template 10.
I have been searching online for a few days now trying to crack this:
My code approx layout:
<body>
<div id="wrapper">
<div id="top-header"></div> <!-- This is a fixed position header -->
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
I'm trying to make my footer so it works in the following two scenarios:
1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)
2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).
Unsuccessful FIX #1
So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.
Unsuccessful FIX #2
I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.
I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.
JMSSTKS
i installed the extension jpCarousel in Typo3 and want to add a slideshow. I changed nothing at the template css file of jpCarousel, but the container is not in the same position like the red div, which also is a div of the extension...
can anyone help me, and tell how i can adjust the galerie to the red div?
thanks!
http://preview-list.lmenges.de/index.php?id=auto
greetings!
Optimize your CSS, for an example width of #content_left causes moving content of right column down. Use some inspector in your browser to make it correctly, for now you have there a quite big mess.
I am using dojox.form.DropDownSelect (not filtering select) in my page. But I am not able to restrict the height of the dropdown. I tried using size, maxHeght etc. but the drop down leep growing as the list grows.
Is there any way to restrict the height?
I don't know if there is a convenient, documented, way already there. Did you just try to guess things or did you actually search the API reference?
In case there is not you could try inspecting the generated dom structure through Firebug. There is probably a div ot table somewhere in there that you can limit the height via a css rule.
#that_drop_down .class_of_the_convenient_div {
height: 500px;
}