Radhika22
-
Posts
33 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by Radhika22
-
-
Site URL: https://www.jivamorelife.com/links
Hi - How can I make the photo of myself smaller on the mobile view of the site? It is small on the web view but enlarges on mobile (photos below). This page is supposed to look like a "linktree" page, but it is hosted on my website.
@tuanphan - Can you help?
-
On 8/8/2021 at 12:26 AM, tuanphan said:
Hi. Add to Design > Custom CSS
/* Mobile create your best life */ @media screen and (max-width:640px) { section#learn-more-1 .span-12 .row .span-3 { width: 50% !important; float: left !important; } }
@tuanphan Thank you!
-
@tuanphan Can you help me show 2 products per row on mobile for the section highlighted below on the homepage? https://www.jivamorelife.com/
On 7/19/2021 at 9:18 PM, tuanphan said:Add this CSS
/* mobile products 2 items */ @media screen and (max-width:640px) { div#page-60f5f9d54b723e0609c06f6c .span-3 { width: 50% !important; float: left !important; } div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) { clear: left !important; } div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 { width: 50% !important; } }
-
On 8/5/2021 at 12:23 AM, tuanphan said:
/* Space between testimonials-collections */ a.Mobile-overlay-nav-item:last-child { padding-bottom: 0; } nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary>a:first-child { padding-top: 10px; }
@tuanphan Thank you!!
-
On 7/22/2021 at 11:40 PM, tuanphan said:
/* sticky announcement bar mobile tablet */ @media screen and (max-width:900px) { .sqs-announcement-bar-dropzone { position: fixed; top: 55px; z-index: 999; left: 0; width: 100%; } }
Now the announcement bar is sticky on mobile (thank you!), but it is cut off in tablet view, and does not show up on the desktop version.
I want the announcement bar below the header.
-
On 7/23/2021 at 2:19 AM, tuanphan said:
Do you need to help with these?
Site URL – https://www.jivamorelife.com/
1. (Mobile – Quick view) Increase text width?
2. (Desktop – Blog posts) Reduce space?
https://www.jivamorelife.com/blog/grow-past-your-fears
3. (Mobile – Menu) Reduce space between Collections and Testimonials?
4. (Mobile – Collections) Align text?
https://www.jivamorelife.com/collections
5. (Tablet – Header) Menu is cut into 2 lines.
6. (Tablet – Shop) Scroll bar at the bottom of page.
@tuanphan Yes, those fixes would be really helpful!! How would you suggest I fix them?
-
12 hours ago, tuanphan said:
You mean sticky both header + announcement bar on mobile?
Yes.
Also, why is it not showing on desktop?
-
13 hours ago, tuanphan said:
I don't see banner. Did you remove it?
The Announcement Bar banner only shows up on mobile, not on desktop versions. Plus, on the mobile version, it is not sticky.
-
13 hours ago, tuanphan said:
Add this CSS
/* mobile products 2 items */ @media screen and (max-width:640px) { div#page-60f5f9d54b723e0609c06f6c .span-3 { width: 50% !important; float: left !important; } div#page-60f5f9d54b723e0609c06f6c .span-3:nth-child(2n+1) { clear: left !important; } div#block-0af3a012f3c9b4da3f05 ~ .row .span-3 { width: 50% !important; } }
@tuanphan Thank you!!
-
On 6/18/2021 at 12:11 AM, tuanphan said:
Use this code
/* Mobile-Homepage-2 columns */ @media screen and (max-width:640px) { section#products-1 .span-3, section#products-2 .span-3 { width: 50% !important; float: left !important; } section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) { clear: left !important; } }
@tuanphan Thank you! Can you do the same for this page? https://www.jivamorelife.com/candy-clouds-mini-paintings
For the collections page, the last item is showing up very large instead of the same size as the others in mobile view. How I fix this? https://www.jivamorelife.com/collections
-
On 7/9/2021 at 9:10 PM, tuanphan said:
Add to Desisgn > Custom CSS
@media screen and (max-width:767px) { .Content-outer { margin-top: 0px; } }
@tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it.
How can I see this banner on desktop?
Also, how can I make this banner sticky so it always shows?
-
@tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky.
How can I fix these 3 issues? (Images below)
I've also listed all of the custom css code on my website below.
/* Fixed Header */
.Header {
position: fixed;
z-index: 9999;
width: 100%;
top: 0px;
}
.Content-outer {
margin-top: 50px;
}// fixed header navigation for desktop, tablet and mobile //
header, .Mobile {
width: 100%;
position: fixed;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
}
/* Mobile header */
.Mobile-bar.Mobile-bar--top {
padding-top: 0px;
padding-bottom: 0px;
}
a.Mobile-bar-branding {
padding-top: 0px;
padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
width: 70px;
}/* Mobile-Banner side by side */
@media screen and (max-width:767px) {
div#page-60c94c80079fbe716535f7e8 .span-3 {
width: 50% !important;
float: left !important;
}
}
/* Mobile-Homepage-2 columns */
@media screen and (max-width:640px) {
section#products-1 .span-3, section#products-2 .span-3 {
width: 50% !important;
float: left !important;
}
section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) {
clear: left !important;
}
}
/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}/* 2 products columns - Watercolor splatters */
@media screen and (max-width:640px) {
div#page-5f489bc95b4e2969d5bf026c .span-3 {
width: 50% !important;
float: left !important;
}
div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) {
clear: left !important;
}
}
/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
width: 50% !important;
float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
clear: left;
}
/* polaroids */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
width: 50% !important;
float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
clear: left;
}
}
/* Collections page header */
@media screen and (max-width:640px) {
div#block-0af3a012f3c9b4da3f05+.row .span-3 {
width: 50% !important;
float: left !important;
}
div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) {
clear: left !important;
}
} -
@tuanphan - Can you help with the question above? I have a similar question.
How can I create a product that includes a bundle of 4 products. Ex: I want to create a bundle of "4 polaroids". So within this product the customer has the option to choose 4 of the polaroids available with better pricing than if they were to purchase each separately.
Here are the list of polaroids: https://www.jivamorelife.com/polaroids
-
12 hours ago, tuanphan said:
/* Mobile-Banner side by side */ @media screen and (max-width:767px) { div#page-60c94c80079fbe716535f7e8 .span-3 { width: 50% !important; float: left !important; } }
Thank you!! Can I do the same thing for these 2 sections?
-
@tuanphan Is there custom code that would do the same thing for a banner section on a homepage (index) page for a mobile view? (The first section in the link below. Photo attached)
-
On 6/11/2021 at 12:09 PM, Wolfsilon said:
Hello,
From the looks of it, just above the "Blog | Add Post | Manage Posts..." tool bar, you can see the tool bar for "Intro | Edit" section. You'd add the banner/intro section by using that tool bar that instead of the editing tools for the actual blog section. It's appearing slightly transparent and seems to also be behind the "Home" and "Collections" header too, I can't say definitively but it looks like you may have some Custom CSS applied to the page that is overlapping the editor tools for the "Intro | Edit" tools, which would make it more difficult to select.
-Dan
Thank you for catching that! Yes, I am able to click it and add a title, but it doesn't show up once I save it. Do you know why that would be?
I've attached images showing this below. I've also listed the custom css I have in case that is interfering.
/* Fixed Header */
.Header {
position: fixed;
z-index: 9999;
width: 100%;
top: 0px;
}
.Content-outer {
margin-top: 50px;
}// fixed header navigation for desktop, tablet and mobile //
header, .Mobile {
width: 100%;
position: fixed;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
}
/* Mobile header */
.Mobile-bar.Mobile-bar--top {
padding-top: 0px;
padding-bottom: 0px;
}
a.Mobile-bar-branding {
padding-top: 0px;
padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
width: 70px;
}/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}/* 2 products columns - Watercolor splatters */
@media screen and (max-width:640px) {
div#page-5f489bc95b4e2969d5bf026c .span-3 {
width: 50% !important;
float: left !important;
}
div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) {
clear: left !important;
}
}
/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
width: 50% !important;
float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
clear: left;
}
/* polaroids */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
width: 50% !important;
float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
clear: left;
}
}
/* Collections page header */
@media screen and (max-width:640px) {
div#block-0af3a012f3c9b4da3f05+.row .span-3 {
width: 50% !important;
float: left !important;
}
div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) {
clear: left !important;
}
} -
Site URL: https://www.jivamorelife.com/links
Hi. I am creating a replica of a "linktree" landing page but on my website. I was able to format it correctly on the website view, but when you look at the mobile view, the image (a photo of me) is really large and takes up most of the screen so you have to scroll down to see the links (image below).
How can I make the image smaller in the mobile view so you can see at least 4 links without scrolling?
-
On 6/11/2021 at 1:31 AM, tuanphan said:
Add to Design > Custom CSS > then save & reload the site
/* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; }
@tuanphan That worked! thank you.
-
On 6/9/2021 at 1:04 PM, Wolfsilon said:
Hello,
On certain templates for 7.0, you can add an intro section to the top of the blog page and add any bit of content that you'd like.
On 7.1 -- Go to your blog > edit > "add section". Add a template section or blank section. You should then be able add text or other content to the top section of your blog page.
Hope this helps,
-Dan
Thank you Dan, but there is no "Add section" available when I look to edit my blog. I can only add posts. Look at the screenshot below. Is there a way to get around this?
-
21 hours ago, tuanphan said:
You mean make header height smaller or???
Yes. How can I make the header height of the mobile view smaller?
-
21 hours ago, tuanphan said:
Use this new code
/* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) { clear: left; } /* polaroies */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } }
Thank you! It worked.
-
Site URL: https://www.jivamorelife.com/blog
I want to add a title to my blog's landing page that says "You are Limitless. The Blog". I can't add blocks to the blog landing page so I think I need custom code to add it in. How can I do that?
-
On 5/12/2021 at 3:24 AM, tuanphan said:
@tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only.
-
@tuanphanThe code above worked for collections!! Thank you.
https://www.jivamorelife.com/mini-paintings
But for the following link, only half of the products are showing 2 per row on mobile. Do you know how to fix it?
https://www.jivamorelife.com/mini-paintings
I used this code that you sent below:
/* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-12 .row:nth-child(3) .span-3:nth-child(2n+1) { clear: left; } /* polaroies */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } }
Make photo smaller on mobile view
in Customize with code
Posted
@tuanphan Thank you!! Is there any way I can make the space between the text and buttons smaller for mobile only as well?