Builder content link
I’m having two issues with images in our press section for desktop and tablets:
Screenshots of the missing icon on tablet and desktop + showing the cut off images on tablet.
Working with Builder for Shopify
Hi @niki!
The image on the far left isn’t showing because it is being right aligned. If you select the image layer and remove “auto” from the margin-left value, the image will appear. The reason the images were being cut off was due to some styling being added via a custom code block. I removed this styling and the images should look as expected now.
Hi Maddy, you are so appreciated! Thank you for making navigating a new solution much less stressful. I’m looking forward to using Builder for a long time.
Hi Maddy,
I had to revert to an earlier version because of some formatting issues and now the press logo images are being cut off again. Where should I go to remove that custom code block?
A few other questions:
@niki In the layers tab, you can search for “custom code” and delete the three custom code blocks. Can you clarify what isn’t showing on mobile? For the logo at the top of the page on mobile, can you try opening the CSS Properties section in the styles tab and changing the position from “fixed” to “relative”, this should center the logo. The logo is within a box which is hidden on desktop, if you click on the eye icon while on desktop, the logo should appear. For the “10% off” and “shop now” text, you should be able to select these layers and center these vertically, or, you can select the box holding these text blocks and add “align-children: center” in the child layout section of the styles tab.
Thanks for bringing this to our attention, I am going to share these details with our team so we can improve the Nik Sharma template to prevent these styling issues in the future!
Thanks, Maddy! I checked and it looks like the version I reverted to already had the custom code removed. The images are cutting off in the editor but seem okay on the published page.
Appreciate the heads up on the hidden box. I revealed it and applied your instructions for the “10% off” and “shop now” but the logo still isn’t showing up for me.
The good thing is that I can now see the live page on mobile, but one issue - I don’t know if this is a margin issue from the header or elsewhere, but on mobile there seems to be extra width all around so when you scroll it isn’t a good experience. Here’s a video of what I mean: Dropbox - RPReplay_Final1643672013.MP4 - Simplify your life
Hi @niki!
I still see one custom code block on your Builder page, but if the images look good on the live site no need to remove this. Did the styling for the “10% off” and “shop now” work? I am seeing some styling from your site’s css being applied to the “10% off” text which is adding a bottom margin, so it may not look completely centered in Builder. If you want to adjust this, you could give the “10% off” text block a class in the advanced section of the styles tab (so you don’t affect other paragraphs on the page) and then open the content CSS section at the bottom of the data tab and add styling like this:
.my-class p {
margin: 0px !important;
}
The logo isn’t showing on desktop or tablet because it is wrapped in a box block with no width. You can move the image layer outside of the box block and it will appear on all devices, but, you will need to make some adjustments on desktop and tablet (the image is very large). Another option, which may be easier, would be to add a separate image for the logo on desktop and mobile so you can adjust the aspect ratio of the image to fit the screen size (if you adjust the aspect ratio of the current image, it will adjust it on mobile as well). Then you can use the visibility section of the styles tab to control which device the logo shows on.
I went through our Sharma Brands full-page template and made adjustments according to your feedback so some of these pain points can be avoided in the future.
Thank you, Maddy! I wasn’t able to do all of these, but I think I’ve found a fix (hopefully it won’t break anything else).
Did you see the video showing the extra white space all around the mobile version? What would you recommend for that? Here is the video: Dropbox - RPReplay_Final1643923388.MP4 - Simplify your life
@niki There was styling within the custom code block (which is meant to style the carousel arrows) but it was also causing the white space you’re seeing. I adjusted the styling, can you publish the update and let me know if it looks as expected now?
Hi @maddy, I was just about to check in and realized I had missed this update! Thank you. That most definitely minimized it, but there is still some extra padding that I am not seeing on any other websites from mobile. Do you think anything else could be contributing to it?
@niki I’m not able to reproduce this, would you mind sharing a screenshot of what you’re seeing? Do you see this only on the live page?