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

CSS Code visible in mobile view


daankist

Question

  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

16 answers to this question

Recommended Posts

  • 0

Hi!

I checked but there is no content in header or footer code injection (see screenshot). Here is the code that I entered in Design --> Custom CSS:

html {

scroll-behavior: smooth;

}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption a {
  color: white; /* color of the caption text */
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

Perhaps there is a mistake here?

 

 

 

Screen Shot 2022-06-18 at 17.39.34.jpg

Link to comment
  • 0

Found it! Thanks so much! 

I had another question, I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

Link to comment
  • 0
15 hours ago, daankist said:

And I would love to be able to have more than 6 columns in the simple grid image gallery on the homepage. Is it possible to do 10? Thanks so much for you help!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 6/21/2022 at 8:41 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

 

I've added this to Design > Custom CSS but nothing appears to be happening to my gallery? See attached screenshot:

image.thumb.jpeg.da1901cb45306bd61b8c8a5e89240448.jpeg

Link to comment
  • 0
40 minutes ago, daankist said:

I've added this to Design > Custom CSS but nothing appears to be happening to my gallery? See attached screenshot:

image.thumb.jpeg.da1901cb45306bd61b8c8a5e89240448.jpeg

Try save & reload your site. If it still doesn't work, try move the code to top of Custom CSS box

If it still doesn't work, add & keep the code in Custom CSS, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Thanks for your swift reply! Still doesn't work unfortunately, I saved and reloaded and moved the code to the top of the box. 

Also, I posted this question:

On 6/20/2022 at 4:58 PM, daankist said:

Found it! Thanks so much! 

I had another question, I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

Do you maybe have a solution for this issue? Thanks for all your help!

Link to comment
  • 0
20 hours ago, daankist said:

Thanks for your swift reply! Still doesn't work unfortunately, I saved and reloaded and moved the code to the top of the box. 

Also, I posted this question:

Do you maybe have a solution for this issue? Thanks for all your help!

You can keep the code in Custom CSS, then let me know. We can check it again easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

This is the current Custom CSS:

 

@media screen and (max-width:767px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

html {
scroll-behavior: smooth;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption a {
  color: white; /* color of the caption text */
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}

 

Link to comment
  • 0

Use this new code

@media screen and (min-width:768px) {
body.homepage .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-template-columns: repeat(10,1fr) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Fantastic! It worked! Thank you.

I had one last question:

I used codeblocks throughout the homepage to create a single page website and used links to let the navigation scroll down to the specific sections. For some reason, this doesn't always work: sometimes clicking the navigation link doesn't do anything, sometimes the page refreshes and then scrolls down to the section. Is there a way to make the single page website work flawlessly? You can see the codeblock I used in the attached screenshot. I use /home#team (for example) to link to the specific codeblocks.1997327676_ScreenShot2022-06-20at16_52_34.thumb.jpg.75f797f39e7eb2ee8be897c4e413a841.jpg

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...