Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

aravsanj

Member
  • Posts

    66
  • Joined

  • Last visited

Community Answers

  1. aravsanj's post in Quantity Arrows Customisation was marked as the answer   
    I am afraid this has to do with the browser than your code. You're using input tags to achieve the quantity input. This is the code you are using:
    <input size="4" max="9999" min="1" value="1" type="number" step="1"></input> The problem is, each browser is rendering the piece of code differently. I tried running this code in isolation on Chrome and it is only showing the arrows on hover. I ran the same code on firefox and the arrows are there by default. But when I visited your website via firefox, the arrows are not showing even on hover (weird, probably incompatible).

    More nerdy explanation:
    The arrows inside the input html element is a CSS pseudo-element. It is non-standard (till date) which is why different browsers are behaving differently. For custom CSS, you can target the pseudo-element using:
    ::-webkit-inner-spin-button
    Solution:
    The following CSS might potentially work but it is not guaranteed to behave appropriately for everyone all the time. I tested it myself and it is working in Chrome (desktop). You can add this to custom CSS.
    <style> input[type=number]::-webkit-inner-spin-button { Opacity: 1; } </style>
    PS: Since this is a non-standard feature, browsers might act differently. The above code worked for me on latest Chrome (desktop). Once you added the CSS however, try visiting the page on firefox, firefox mobile, chrome mobile, safari, etc. Also keep on notice if it somehow becomes standardized in the future. The CSS might mess it up in such a case.
     
  2. aravsanj's post in 7.1 How to add a faded/transparent background colour to a text block? was marked as the answer   
    @ando_337
    I believe what you want is:
    1. A  transparent colored box
    2. Solid white colored text in it
    3. A border that is fixed at certain distance away from the box so it will peek the image below.

    Try replacing the code with the one below:
    <div id="border"> <div id="box"> <div id="text"> <h3>Wenn der Blick in die Sterne Zuhause bedeutet... <h3> </div> </div> </div> <style> #box { background: rgba(0, 0, 0, 0.3); padding: 20px 40px; } #text h3 { color:white; } #border { border-color: black; border-width: 2px; border-style: solid; padding:5px; } </style> I hope I had all the right assumptions and the code is working.
  3. aravsanj's post in Customise text background of summary items was marked as the answer   
    Oh I just noticed this. Carousel summary act/respond as a block behind the scene. You may have to choose another summary option otherwise the CSS targeting individual summary item will distort when the screen size changes.
    Yes
    .collection-type-events-stacked.view-item main#page { padding-left: 10vw; padding-right: 10vw; } #page-section-5f819972258d731d2133af79 .sqs-block-summary-v2 .summary-item.positioned { background: #f2f2f2; padding: 1vw; } Neither of these seems to be targeting any elements in the password protected page. Maybe the carousel itself is the problem. 4th item is on the next line because of padding given to .item-summary

     
    Yes. Something like this will limit the CSS to only that block:
    #blockID .class { /* code here */ }  
  4. aravsanj's post in Left Align Title / Logo was marked as the answer   
    Try this (on top of the code above): 
    #upper-logo { position: absolute !important; } #topNav { position: relative !important; top:23px; /*Change value here to increase padding between logo and stack*/ }  
×
×
  • Create New...