noahawaii

Site links are not links in the html (see the photo). They are the links at the bottom From what I can tell, Google grabs these from the ID of various text, but I was wondering if SS has something like this without using code blocks? They appear to be auto generated anchor links by Google based on the ID in the HTML, so is there any way to do this without creating an anchor link because that's not really the solution either.

UPDATE: SS Re-did their gallery blocks, so now its actually easier. You can just copy and paste the entire HTML element from a blog post into a code block somewhere else and it all works great. No need to worry about the difference between mobile and desktop.

Thanks that did it!

I fixed it. Took forever. Their widgets are terrible. If anyone else has this issue message me on my website, and I'll send the solution. https://noahlangphotography.com/contact

This is the closest I've gotten but it's not a solution because it applies to everything. Even the header. * { overflow-x: hidden !important; max-width: 100% !important; } However, this should work, but it doesn't * section[data-section-id="63e6a2ba7302361813434e9f"] { overflow-x: hidden !important; max-width: 100% !important; }

I've narrowed down the issue to pages with these product widgets, which I need on my website, but I'm struggling to figure out exactly what's overriding the CSS to see how to prevent it. <script type="text/javascript" src="//www.avantlink.com/product_ad_widget/paw.php?pawid=168457&amp;pw=302869&amp;output=js"></script> That link above is one of those with the product widget.

Yes exactly! That weird overlapping is a exactly what i'd like to go away to just appear like a mobile screen. Theres so many downsides of the fluid engine..

Okay I now have a working fix! Its a bit of a long shot, but it's what we got because SS only lets there be gallery blocks for Circle members... First create a gallery like you want it in a blog post, then copy the entire HTML for the element in both desktop and mobile. You can just shrink down your browser until you see the gallery collapse to get the mobile. Then, save these in two separate spaces and wrap the desktop element in: <div id="first-gallery" class="first-child"> <!-- Content of the first gallery goes here --> </div> Then wrap the second (mobile) gallery in: <div id="second-gallery" class="second-child"> <!-- Content of the second gallery goes here --> </div> Finally, put both inside of a code block where you want them to display along with: <style> @media (max-width: 767px) { .first-child { display: none !important; } } @media (min-width: 768px) { .second-child { display: none !important; } } </style> This will hide each respective gallery on screen where they shouldn't be. Note: On the Desktop copy, you can start from <div class="sqs-block-content">, but on the mobile copy, you have to start from <div class="sqs-block gallery-block sqs-block-gallery" ... This will remove extra padding caused by placing a gallery block inside of a code block, but on mobile, the entire element is essential to the styles. Hope this helps!

I thought it might be a security thing to prevent other sites from loading images hosted on SS

This is close maybe someone could build off of it, but if you have a blog page with a gallery you can remotely load an existing gallery block into another page. For example <script> $(function(){ $('.hawaii—gallery-block').load('/blog/best-things-to-do-oahu #block-yui_3_17_2_1_1680568493498_151664'); }) </script> <div class="hawaii—gallery-block"></div> Only issue is, I couldn't get the images to show...

Is there any way to make the footer elements stack like they do when it hits 768px but before then? I would probably choose 936px, but I'll play around with it. https://noahlangphotography.com/blog Thanks!

This code used to work html, body { overflow-x: hidden !important; max-width: 100% !important; } but now it only works some of the time on mobile blog pages. See this one for example. In some browsers the overflow is hidden and for some it isn't but only on blog pages. https://noahlangphotography.com/blog/lualualei-lookout-trail-oahu-hawaii

That did it thank you! Also there's somebody else having the same problem because of the change. Last time it was a whole mess of people.

It's still not quite working. The theme is set to darkest, but the images that beneath the section still don't show through.

SS is at it again by changing their code which messes with transparent backgrounds. I just want [data-section-id = "622e5b8ddd586822ec87dd31"] to be transparent to show the section beneath, but I can't figure it out since the change this morning. So far the code below is the only luck I've had if I change the background to anything other than transparent it will change the color. .page-section[data-section-theme="black"] .section-background { background-color: transparent !important; } Hope anyone can help!