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

RecapRabbitHole

Member
  • Content Count

    29
  • Joined

  • Last visited

Everything posted by RecapRabbitHole

  1. Site URL: https://www.recaprabbithole.com/recap/south-china-sea @tuanphan @paul2009 How do I change the gallery pictures by swiping instead of tapping? I want to mimic instagram where you swipe the gallery right or left. See the screenshot below:
  2. Thanks for the quick reply. I have revised overflow-x: hidden Found the issue, problematic CSS elsewhere: html { overflow-x: initial !important; } @paul2009 thanks
  3. Site URL: https://www.recaprabbithole.com/recap/human-viruses I cant scroll on android phones. I am using some custom CSS, that @tuanphan helped create (thank you!), to make images stretch across the entire screen on my blog posts, here: @media screen and (max-width:767px) { /*This stretches the everything across the screen on the blog posts*/ /* make image fullwidth */ .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } /* Add padding around text blocks, both sides, leaving out, image/gallery/embed - blocks */ .blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block, .gallery-block, .embed-block) { padding-left: 9vw; padding-right: 9vw; } /*This code fixes the iphone horizontal scrolling, but stops all scrolling on androids*/ html, body { overflow: hidden; } } I know the piece of code that is causing the issue: /*This code fixes the iphone horizontal scrolling, but stops all scrolling on androids*/ html, body { overflow: hidden; } But without this code above, the mobile site has a black bar on the right-hand side, allowing strange horizontal scrolling on iPhones, see attached video for issue without red code. How should I revise this code, to allow scrolling on android phones? @paul2009 Do you have any thoughts?
  4. Site URL: https://www.recaprabbithole.com/recap/human-viruses MOBILE ONLY: This code from @tuanphan is excellent, but it only targets image blocks: /* make image fullwidth */ .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } /* make spacing between text blocks - both side */ .blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) { padding-left: 8vw; padding-right: 8vw; } html, body { overflow: hidden; } Page Link I want to make gallery blocks stretch full screen too. See screenshot, I want to make this gallery block also fullscreen like the image above:
  5. I put in your code. Open on mobile you will see the issue. @tuanphan Your code adds a new issue: horizontal scrolling...
  6. .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } .blog-item-wrapper article.entry .html-block.sqs-block-html { padding-left: 40px; padding-right: 40px; } } No luck. It adds space to the right hand side of the page, such that you can scroll horizontally. See attached screenshot.
  7. Still no luck. It makes the page on the mobile have black space on the right hand-side. Something is wrong with the scale and width.
  8. .blog-item-wrapper .image-block { padding-left: 0; padding-right: 0; } Thanks, but this still leaves some white space around the images. How can I make the images use the whole screen width?
  9. Site URL: https://www.recaprabbithole.com/recap/dr-anthony-fauci I want everything except text, to stretch across the whole screen on all of the actual blog posts themselves. on Mobile only. See attached image: This worked: /* make image fullwidth */ .blog-item-wrapper article.entry { padding-left: 0; padding-right: 0; } /* make spacing between text blocks - both side */ .blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) { padding-left: 8vw; padding-right: 8vw; } html, body { overflow: hidden; }
  10. Site URL: https://www.recaprabbithole.com/ I want to make the content width of the top red banner stretch the entire screen. Right now it is at 100, but the squarespace slider cant go further. How do I do that? As you can see the items on the red blog are not centered above the 4 columns of the page.
  11. Hi @moeezali Unfortunately this gives me the inverse of what I would like. Currently I have: 8 Blog posts displayed on Web 8 Blog posts displayed on Mobile. I want: 8 Blog posts displayed on Web 10 (n) Blog posts displayed on Mobile. (n) - being a variable I can change. Sorry about that, I don't think my wording was very clear to begin with. I think your code should be: @media(min-width: 760px) { .blog-basic-grid article.entry.blog-item:nth-child(9), .blog-basic-grid article.entry.blog-item:nth-child(10) { display: none; } } This code, with my change, gives me the desired result. Thanks! your code did the heavy lifting. Great Job!
  12. Site URL: https://www.recaprabbithole.com/ I want the most recent 10 blog posts to come up on mobile, but only 8 to come up on the desktop version (as they do now - Its currently 8 on web and mobile). What CSS do I use to make this happen?
  13. Site URL: https://www.recaprabbithole.com/ (this is at the bottom of my topics page on mobile) Link here: https://www.recaprabbithole.com/topics I like that the tags are different sizes based on their frequency. But they are way too big on mobile. How do I make them all smaller, while remaining different sizes relative one another based of the number of times that tag has come up? I would also like to center those tags then... I have tried this code: Its a good base size for the tags, but makes all of them the same size. 😞 Please help!
  14. Site URL: https://www.recaprabbithole.com/ How do I center all of these words that are on the left by default on mobile only? Link to page:https://www.recaprabbithole.com/topics
  15. @humxahafeex Thanks that works fine for the pictures, but it makes the text fall off the page to the right. Check the screenshot: Here is your tweaked code that I am using: @media screen and (max-width: 767px){ .blog-basic-grid--container>div>.image-wrapper>img{ width:100%; } .tweak-blog-basic-grid-width-full .blog-basic-grid { padding:0px !important; } .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--text { padding: 1em !important; // to create white space around the text. But the text falls off the page to the right... } }
  16. Site URL: https://www.recaprabbithole.com/ I would like the blog cover images (only) to stretch the full width of the phone such that there is no white space to the right of the blog pictures. See attached illustration. What CSS should I use? ------------------------------------------------------------ @paul2009 - I believe you are one of the best on here, I have followed your solutions on other CSS posts, and wonder if you might be able to help me. Thanks!
  17. Site URL: https://www.recaprabbithole.com/ https://www.recaprabbithole.com/ I would like the blog cover images (only) to stretch the full width of the phone such that there is no white space to the right of the blog pictures. See attached illustration. What CSS should I use?
×
×
  • Create New...