sarahjo

On 2/7/2024 at 11:36 AM, tuanphan said:

@media screen and (min-width:992px) {
[data-dynamic-href="/visual-diary-2022/"] #project .gallery {
    max-width: 1200px !important;
    margin-left: 350px !important;
}
}

I just added the code and don't see any difference.…

On 1/28/2024 at 9:07 AM, tuanphan said:

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
#project .gallery {
    max-width: 1200px !important;
    margin-left: 350px;
}
}

 

How do I use this code to make it only effective for this one specific page? https://www.sarahkoester.com/diary#/visual-diary-2022/

On 1/25/2024 at 9:14 AM, tuanphan said:

You mean increase width of this red box?

Yes! 

On 1/22/2024 at 10:42 AM, tuanphan said:

Can you share link to page in screenshot?

https://www.sarahkoester.com/diary#/visual-diary-2022/

I managed to make the images clickable but I still would prefer using more of the width (reduce white space on the right)

anyone?

www.sarahkoester.com is my website if that helps

And I know that there is the possibility of using light boxes to make the images clickable but I don't like the fixed order. I want to arrange my photos freely as in a diary style.

Hey, 

is there any way to use the full width (or at least some of the remaining white space on the right) and to make them clickable to enlarge them? At the moment they are very small. I would like to use this only for my visual diary pages not for my normal project galleries. 

@tuanphan That finally worked! Thank you 🙂

@tuanphan Take a look at the About page, it's  the only one where the issue still occurs…

The problem still exists… not sure what to try

Okay, I found this part but unfortunately even though it worked out and I got more white space to the borders (by adding !important to the mobile rule), it brought other issues to the page. The gallery titles were display in a wrong way on mobile and part of the menu disappeared after clicking on it.

Is there any other thing I can try?

@tuanphan @jaeveedee

I can't find this part in my CSS… I used the search function but there is no section like this. I'm not sure where to add or remove the !important part.
Could you please help?

Thank you in advance!

Thank you – but it still doesn't fill up the whole screen like it's the case in the attached screenshots above…

On 6/11/2023 at 9:21 AM, tuanphan said:

Do you have link to gallery page?

Yes, for example here: 

https://www.sarahkoester.com/#/invisible-bond/

4 hours ago, tuanphan said:

Hi,

What is site url? We can check problem easier

https://www.sarahkoester.com

4 hours ago, tuanphan said:

Can you share link to About page? We can check easier

It is https://www.sarahkoester.com/about

On 6/8/2023 at 9:41 AM, tuanphan said:

What is your site url? We can check problem easier

It is www.sarahkoester.com

anyone?

anyone?

Hey,

I customized my nav bar to float to the right today so the logo is on the left side.

Now, every time you click on a page of the menu, the nav bar wiggles from left to right or you have to click for a second time, to visit the page. 

Is there anything I can change in my code to avoid this?
 

This is the code I've used:

navigator header#topBar ul#nav {
    display: block;
    float: right;
   padding-right: 40px!important;
   padding-top: 45px!important;
}

Hey, 

I have another question regarding my About page on mobile.

It's way too narrow to both sides. I would prefer to have the same space to both sides as I have on my gallery pages. I'll attach a screenshot of my About page and one of a gallery page (titled vague)

mo

Also, if possible, I would like to use a burger menu on mobile that opens up full-screen when you click on it.

Here is an example:

https://www.pentagram.com

Hey! 
I used a custom CSS code I found in the forum to bring my nav bar to the right. 
Now there's an issue on the mobile web version as the menu is not clickable anymore.

This is the code I've used:

#navigator header#topBar ul#nav {
    display: block;
    float: right;
   padding-right: 40px!important;
   padding-top: 45px!important;
}
@media screen and (max-width:640px) {
nav.main-nav.dropdown-hover {
    display: none;
}
section#container {
    margin-top: 85px !important;
}
div#mobileNav {
    float: right;
    position: relative;
   padding-right: 30px!important;
   padding-top: 12px!important;
    bottom: -5px;
}
.siteTitle * {
    font-size: 30px !important;
}
}

I hope you can help – thank you in advance 🙂

@tuanphanThank you! But then, I would have to adjust each project separately which would lead to a very long custom CSS… Is there any workaround that the CSS would only affect specific pages? For most pages, I would like to keep the view subtitle.

On 12/17/2022 at 2:26 AM, tuanphan said:

Add to Design > Custom CSS

/* rename view text */
.project-title h3 {
    font-size: 0 !important;
}
.project-title h3:before {
    content: "Antwerp, Belgium";
    font-size: 16px;
}

 

@tuanphanIt should only apply to one specific page and not to every page. I tried to add it in the page settings under Advanced but nothing changed. What am I doing wrong?