jcsport123

@tuanphan with the css below the hyperlinks do not work on mobile. Is there a work around to fix this?

@tuanphan since the one markdown has additional text the boxes ended up being different sizes. Is it possible to pad the other one somehow?

Site URL: https://www.elevateptr.com/ Hi - I'm trying to duplicate this look for my homepage so people scroll down. How do I go about accomplishing this? https://mariodelvalle.github.io/CaptainIconWeb/ Best, jessica

@tuanphan Thank you! You are the best! Is there a way to tweak your code so all of the rows are spaced out evenly for me? elevateptr.com/cost

@creedon Thank you! I am trying to learn from this now and will definitely let you know how it goes! I'm new too this and definitely have been building off of things I find on other sites and using the element tool to figure out the code. You mentioned four different versions of JQuery ... I'm guessing I should just be using the latest version, but do I need one in the header and footer for everything to work? Is there any way you can help me clean it up? THANK YOU!!!! This really helped me a lot!

I have not... any suggestions?

@tuanphan I did not solve this. It is for block #block-yui_3_17_2_1_1599945824037_17097 I attached the screenshot of what it looks like now and what I'm trying to get to.

Site URL: https://www.elevateptr.com/cost Hi - I'm trying to make a pricing grid like the below website and attached screen shots. I was trying to do this via markdown, but the paragraph text & button are not showing up. Below is the css I was using. This is the overall look and feel I was going for (look at the initial assessment box): https://www.trailphysio.ca/ // Info Box // .sqs-block-markdown { max-width: 600px; background: #ffffff; border: #DDDDDD 1px solid; border-radius: 0px; padding: 30px !important; margin: 20px; text-align: left; } // Info Box Title // .sqs-block-markdown h2 { color: #000000; font-size: 26px; letter-spacing: 0px; padding: 20px 30px 0px 30px; } // Info Box Text Info // .sqs-block-markdown p { padding: 10px 30px 30px 30px; margin: 0; font-size: 16px; text-transform: none; letter-spacing: 1px; line-height: 28px; color: #181818; } // Info Box Button // .sqs-block-markdown a { font-weight: 200; font-size: 15px; text-transform: none; display: inline-block; border: 1px solid black !important; padding: 15px 30px !important; background-color: white; color: black !important; border-radius: 0px; } .sqs-block-markdown a:hover { background-color: black !important; color: white !important; }

Site URL: https://www.elevateptr.com/conditions Hi, Is there any way to shrink down this page via css so all of the images are laid out like the desktop version of my site versus a long list? Thanks for the help!

@tuanphan How do I do this for my footer? https://www.elevateptr.com/. THANK YOU!!!

Site URL: https://www.elevateptr.com/ Hi, In 7.1 is it possible to change the orientation of a stacked instagram block to be in a "landscape" left to right orientation vs. vertical? Thank you!!!

@tuanphan I'm trying to make autoscroll work for my site? What could should I add? elevateptr.com. Thank you!!!!

@tuaphan that image can not be a background image for it to look good on mobile. I want to add the Parallax scroll feature to that specific image. The code is in the footer and is listed below. So in addition to finding the .section-background img I need to add a line of code specific to that block and I can't figure out how to write that code. Thanks for your help! <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src') + '?format=2500w'; var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: .5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

Site URL: https://www.elevateptr.com/ Hi - does anyone know how I can adjust the custom code injected into my footer so the parallax code targets the first image on my homepage? Would it be block specific? If not, can anyone help me with the code to make a background image look good on mobile? I left this main image as an image vs. a background as I added css so on a mobile view the image shrinks to fill the screen. Thank you!

Site URL: https://www.elevateptr.com/ Hi - Does anyone have an idea on how to reduce the spacing between a header and paragraph section? Shift + enter changes it all into one type. Thank you!