Rmarkjr
-
Posts
17 -
Joined
-
Last visited
Rmarkjr's Achievements
-
tuanphan reacted to a post in a topic:
Video size on mobile devices
-
This one worked really well! Once again. Thank you!
- 4 replies
-
- 1
-
-
- css
- custom-css
- (and 2 more)
-
Will this same code work if I was to put it into a code block on each page? EDIT: no, no it does not lol. Is there a way to make it work in a code block to be page specific? I have several pages with videos like that. Looks like that code only affected the main page and not the other city pages I have made.
-
tuanphan reacted to a post in a topic:
Resize media image and text on mobile only
-
Hello! I have noticed that on the mobile device the videos are rather small. When I see them in squarespace I see that the video is nowhere close to the size of the actual container itself. There seem to be a lot of dead space between the video and the container. Is there any way with code to decrease that space and enlarge the video on mobile devices only? This would also be page specific and not for every video. I have put a link to the page with the video of the black car at the top of the page. https://www.kaliberautodetailing.com/ceramic-paint-coatings the attached pictures show the space to the left and right of the video on mobile view and then also in the squarepsace editor. You can see the video and the blue line around it Thank you!
-
Resize media image and text on mobile only
Rmarkjr replied to Rmarkjr's topic in Customize with code
Thats awesome. Thank you again! That was exactly what I was looking for!- 6 replies
-
- 1
-
-
- css
- background
- (and 2 more)
-
Resize media image and text on mobile only
Rmarkjr replied to Rmarkjr's topic in Customize with code
Hey! I just applied this to all my pages that I needed with the code box you said to do <style> @media screen and (max-width:640px) { section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; } section.Intro.Intro--has-image h1 { font-size: 25px !important; position: relative; top: -100px; } section.Intro.Intro--has-image { min-height: unset !important; height: 200px !important; }} </style> I got to say thank you! It worked beautifully. All my pages and city pages look sooo much better. I did change the top value to -100 to center it more and the font size up a bit. Man, I can't believe it finally looks good. Thank you! This helps me out a ton. Out of curiosity, using that same code above for each page. Is there a way to say "zoom in" on the background image? like the car, if I wanted to make that appear a bit bigger, to remove some of the black space on the left and right of the car, without changing the position of it, is there an added code that can do that? -
Resize media image and text on mobile only
Rmarkjr replied to Rmarkjr's topic in Customize with code
Thank you! I see that you used the collection id from the site... having a hard time how you found the section.Intro figure img part. But anyhow, yes, if there is a way to resize the font on mobile so that it actually fits better in there and also get rid of the long black dead space that is under the car with the text that would be great! The goal would be to have the car fit right with the text over the car and not almost each word on a sperate line. Hopefuly then part of the website text shown under that, starting with the What Does A Ceramic Coating Do? Also, if someone wanted to zoom in on the car and make that fill the screen left to right just a bit more... how would you do that? Thank you again! -
Hello! I am needing help and I am trying and learn a few things. 1) I would like to know how to find the right selector for the background image so I can alter it for mobile. (page specific, not global) 2) How to resize it so that it fits on mobile, and if possible, how to position it. 3) Set a min or max height. 4) Change the text size so that it fits on the screen better for mobile. 5) I have multiple pages that I need to change so maybe how to select multiple pages or something. 6) anything else that is helpful to make it look good that I don't know about **This would be page specific and not global** If someone could give me an example of the mobile code for High-End Ceramic Coating Service In Owasso, OK - Kaliber Auto Detailing to make that car image fit along with the text and the background does not take up the whole screen, with the car in the right position.. that would be awesome. Another example would be https://www.kaliberautodetailing.com/paint-polishing I don't think I need the code so much for this one as much as I am interested to see how the selector differs from the first one. I do have that find Squarespace Id's extension, but I don't think that is showing me everything. a huge thank you for any help with this! NOTE: I have attached an image of how it looks on my screen, which is a Samsung S23 Ultra. Squarespace preview shows it just a tad wider than this with the words "Ceramic Coating" on one line instead of two. We can see the car is cut off... there is a lot of black dead space from the image, and the text is way too big
-
Hello again. So I spoke a little too soon. I see that on the desktop it works great. But on the mobile phone the logo is huge and I cannot see the text at all. How would I be able to make those fit or resize them so that the logo image and the text both fit in the screen and look the way it should? Thank you Also, the text and the position looks good on tablet, but the image is super small.
-
sorca_marian reacted to a post in a topic:
How to move the H1 title and image up higher in the banner on specific page?
-
Hey! Thanks for the reply! Interesting. I did also try negative numbers in the padding and margin , but I could not get it to move. I might have missed the right selector then. I see that you did a media query which I will absolutely use to make sure it is right on mobile as well. But what would be the main one for desktop? would it just be the following with out the @media? .intro--has-image .Intro-content { padding-top:100px; padding-bottom: 180px; } Edit. I just tried it without the media query, and it did work on desktop. Perfect! I appreciate the help! No idea why it didn't work for me earlier when I was messing with the inspect element section. Actually, now that I am thinking about it, a lot of the margin-top and so forth was crossed out and when I added it then it crossed it out as well. Maybe it was the wrong section then. But thank you again!
-
Hello! So, I have a new page I am trying to make. I do not want the changes to affect the other pages I have already. I have set the H1 size already, and I have managed to change the max-height as well for the banner image/section. However, when I did the max-height the text ("Auto Detailing For Tulsa, OK") and image/logo stayed in the same place and did not adjust itself. I am trying to find a way to move the text and image higher in the image, not all the way to the top, more centered. I have tried margin-bottom and padding-bottom and nothing changes with it. I am not sure if it is even possible to do. any help on this would be great. The new page is this https://www.kaliberautodetailing.com/new-page-2
-
How to change and position banner background image on mobile
Rmarkjr replied to Rmarkjr's topic in Customize with code
I guess for some reason the where you insert the link in the post is not working. I tried twice, but this is it, High-End Ceramic Coating Service For Jenks, OK - Kaliber Auto Detailing -
Is there a way for me to be able to use an image on my site for the background and the social image but change the image that shows up on Google Search results? I ask because the background image is one image and the text over it is another image and not text. I had to do this due to using an image with text adding in the image did not resize right on mobile. Adding text over it also did not work great. So now on Google results it is just a black car, which is kinda boring and not the look I am trying to give. any information on this would be great. Thank you!
-
I have Wordpress 7.0 Hello! I have had this website look like this for a long time now and I am now actively trying to make it look better. On this particular page on my site the banner background image doesn't fit right on desktop and especially mobile. I have tried to edit the image with adding black to the bottom and sides of it... which has helped a bit. But I am looking for a few things. How do I position the top background image for both desktop and mobile? How would I use a different image for the mobile version only? and maybe a min height for the section so the image fits on mobile correctly without changing the min height for desktop Or a combination of the three? Basically, I am looking for a way to make the background image look good on mobile and be able to adjust it on desktop if it is not right. I have tried a few things that have not worked. Interestingly when I used this code, the only thing it did was mess up the gallery images on the bottom of the page. I found this code here: Edit the Mobile Banner Image in Squarespace 7.0 | Rebecca Grace (rebeccagracedesigns.com) /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ #ceramic-paint-coatings img { display: none; } #ceramic-paint-coatings .sqs-block-image img { display: block; } #ceramic-paint-coatings { background: url('https://images.squarespace-cdn.com/content/59a8f97b2994ca2e6f88a601/1693894372479-NKQAASZZQ2EZ1KPDYK25/Ceramic+Coating+Page+Banner.png?content-type=image%2Fpng'); background-repeat: no-repeat; background-size: 100%; } /* Insert Code for Mobile Above This Line */ } I am sure that there is other code that I need to do what I am looking for, but I am not sure what it is, and I am not good with code at all. Any help would be great. Thank you!
-
Trying to change the color of a line of text
Rmarkjr replied to Rmarkjr's topic in Fonts, colors and images
Not sure if this is the right way to do it but I had to use the markup box to change the color and then use the custom CSS section to center it as it would not let me center the text in the markup. -
Trying to change the color of a line of text
Rmarkjr replied to Rmarkjr's topic in Fonts, colors and images
NOTE: IF the above cannot be accomplished. I have tired the markup text and I got it red but I now cannot get it centered. This what I have right now. I have used the text-align, and such but it wont move from where it is at. <span style="color: red; font-size: 20px; font-weight: 600; font-family: futura-pt,">Our Ceramic Coatings Include A Lot For Your Money:</span>
