marketingrisingdigital
-
Posts
7 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by marketingrisingdigital
-
@Ziggy I meant to include that info. I changed the "header" name only to ".seo-header" which fixed the crowding issues. Please see below: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(13,7,84) } .price .seo-header { background-color: 111; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #0d0754; border: none; border-radius: 17px; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; }} </style> </head> <body> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#565187">Optimize</li> <li class="grey">$ 599</li> <li>Title Tags (up to 6 pages)</li> <li>Meta descriptions (up to 6 pages)</li> <li>Keywords for all Pages</li> <li>Keyword map</li> <li>Ongoing support and bimonthly check ins for 6 months</li> <li>+ 8 MORE items</li> <li class="grey"><a href="https://risingdigitalmarketing.com/seo-service-packages-for-small-business/p/optimize-my-content" class="button">Select Plan</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#3d3976">Amplify</li> <li class="grey">$ 430 / month</li> <li>Everything in the Optimize plan +</li> <li>Broken links + advanced internal linking</li> <li>Business citations</li> <li>Client Favorite: Research what your customers want to know and adjust content to satisfy those queries</li> <li>+ 18 MORE items</li> <li class="grey"><a href="#" class="button">Select Plan</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="seo-header" style="background-color:#0D0754">Rise Above</li> <li class="grey">$ 1450 / month</li> <li>Everything in the Amplify plan +</li> <li>75+ blog topic ideas</li> <li>Content Creation</li> <li>Up to 70 relevant, high-quality backlinks per year</li> <li>Implement Schema Markup</li> <li>+ 32 MORE items</li> <li class="grey"><a href="#" class="button">Select Plan</a></li> </ul> </div> </body> </html>
-
@Ziggy your suggestion worked in correcting the header issue, thank you, but now the columns are messed up. I would like them side by side, all three.
-
Hello, helpful SS community! I am trying to create a price card, but when I apply the code to my website it wont display properly. I have ran the code in w3school as well as onecompiler.com (to test) and it does display properly in both places, however, it's broken on my site. I've included some photos : The first photo is what it looks like on onecompiler.com (look correct) Second photo is the code on W3school (also correct) Third image is what it looks like under the "home" section of the website. </broken> It appears the headers: "Optimize", "Amplify" and "Rise Above" are stacked on one another. I just don't understand why it's displaying correctly when I test it, just not on the actual SS site. Thank you for your help, Tempy Keller ps.. site password is Risingup23 www.risingdigitalmarketing.com
-
Thank you for looking at this with me! I'm testing for the responsiveness of my grid using the "developer tools" under "view," and have found that the container is not resizing properly when viewport is set for "Ipad Mini." i've included 3 photos: 1st photo is what it looks like (you can see the containers "boxes" are overlapping, and images 2+3 are of the code I've used. I thought the "grid-template-columns: repeat(auto-fit, minma(300px, 1fr)); " would fix that for all devices? Do I need to add an additional @media query or change my minmax px? Site password: Risingup23 Thank you again, Tempy
-
@ziggy, thank you so much!
-
@Ziggy Thank you for letting me know. That's bizarre, as I did not set it to do that. Do you have any idea how I can remove that? 😬 For the time being I've disabled it, so you should be able to access the site without it popping up. Thank you so much for your help, Ziggy!
-
Hi everyone, I'm new to this, so I'm looking fora bit of a handhold. On my landing page I have two buttons (a primary and a secondary) positioned side-by-side. When I test the responsiveness of my design using the chrome browser, under view>developer>developer tools (photos included), I can see that the buttons overlap when I chose certain devices to test, mainly ipad mini and Samsung Pro. I was using this code in the Custom CSS, but that doesn't seem to work, so I've removed it: @media screen and (max-width:1369px) and (min-width:324px) { .fe-block-0d97173bcfd3c5115685 { position: relative; right: -70px; } } - - - is this correct? Also, re the bit I've highlighted in orange " .fe-block-0d97173bcfd3c5115685 " ... what does this mean, exactly? Maybe the problem is there? My question: How do I get these to sit side by size (resized appropriately) for these devices, using CSS? Would I add this CSS code to the design>Custom CSS? Thank you in advance for your help. Ps. . Site Password: Risingup23 Pss. site's under construction, hence the mess (sorry!)
