Trying to simplify

[Pideja]

pideja.ca
Not too sure if it’s a good idea, but I’m trying to simplify the design of my pages but having a hard time with three things:

• the name plate in the masthead has a black background. I’d like to change that and probably the whole text/background.But, I can’t find it in the inspector at all;
• on the “About” page (https://pideja.ca/about/), you’ll notice an area that’s not the same grey as the rest of the page (#4f4f4f). Again, I’ve been thru everything and I fail to correct that darker “frame” area;
• I’d like to remove the logo on the left side, or at least align it correctly, as the menu button is.

It’s been years sing I last tinkered with the design of this site, no I lost some of my bearings …

[Pideja]

Looking at my css file, I see this:

.top-pallet-logo {
background-image : url(“Backlight”);
background-repeat : no-repeat, no-repeat;
background-position : 7%, center;
height : 48px;
width : 100%;
}
li.top-pallet-logo a {
display: block;
height : 75%;
width : 75%;
}

The link indicating “Backlight” actually says: (https://pideja.ca/backlight/designer/page/image/6),url(https://pideja.ca/backlight/designer/page/image/27)

This would indicate that the logo (left) and my nameplate are on the same line, sort of linked together. Is there a way to disassociate these two elements? I could then manage these two elements independently and change the name plate and better align the logo, or just remove it.

[Pideja]

I found a way to remove the black top bar, change the name plate, and make the whole page the same color. So, goes simplifying for now. But I still have that pesky text box that’s too narrow on the mobile. Looking at the CSS but still in the dark…

[Daniel]

[Pideja]

Thanks, Daniel, but it doesn’t work on my iPhone. Maybe something else is in play, here.

[rod_barbee]

In your custom css (starting at around line 30) you’re applying a lot of padding left and right to the copy area of the about page.
You should put that css in a media query affecting only larger devices

padding-------------------------------------------------------------*/
.slug-about .the__copy {
background-color : #4f4f4f;
font-size : 1.25em;
line-height : 1.40rem;
padding : 0px 70px 20px 70px;
text-align : justify;
text-justify : inter-word;
}

[Pideja]

Well, I’ve tried a lot of variations, the last one being redefining the @media conditions:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

It seems to go pretty well in the landscape view but in the portrait view, the text is now in aligned left mode but still all bunched up in the middle of the page.
I’m now using this css:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

.the__copy {
	font-size: 1rem;
	line-height: 1.5rem;
	margin-top: -120px;
}

.slug-about .the__copy {
	background-color: #4f4f4f;
	margin-top: 0px;
	text-align: left;
}

It looks good in landscape format, but in portrait, it’s usable to some extent, but I would rather the text cover more of the page in width…

[rod_barbee]

@Pideja

It seems to go pretty well in the landscape view but in the portrait view, the text is now in aligned left mode but still all bunched up in the middle of the page

Did you address the custom css I pointed out above? It applies 70px of left and right padding no matter the device width. If you don’t want the text to be squeezed on smaller devices, put your css in a media query that will apply it only to larger screen widths

[Pideja]

The script now reads:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

.the__copy {
	font-size: 1rem;
	line-height: 1.5rem;
	margin-top: -120px;
}

.slug-about .the__copy {
	background-color: #4f4f4f;
	font-size: 1.25em;
	line-height: 1.40rem;
	padding: 0px 10px 20px 10px;
	text-align: left;
	text-justify: inter-word;
}

It works just fine.
Thank you Rod and Daniel for once again rising to the occasion.

[Pideja]

I am back at it… Although most of the pages look good on the monitor, on the mobile one of the pages looks quite different in portrait or landscape. I’ve written a media queries to attempt to address this, to no avail. On the PRODUCTIONS page, the large image display should contain a credits section that is centred on the page. But, below 1060px on the workstation monitor and on the mobile phone, the credits are way to the right!
Using the inspector, I located (I think) the corresponding css code:

#main-copy-credits {
display: block;
font-size: 1rem;
font-weight: 400;
line-height: 7px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
white-space: nowrap;
width: 900px;
}

#pallet-credits {
display: none;
}

and for the media query:

.main-copy-credits {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 7px;
	margin: auto;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	width: 300px;
}

But frankly, I am at a loss to see what is at play here. Any ideas?

Example: https://pideja.ca/galleries/01_duceppe/2024-2025/03-contre_toi/

[rod_barbee]

The page you linked to looks fine on both my iPhone and on the monitor.
Here it is on the iPhone:

Looks just as good in landscape as it does in portrait.

try clearing browser cache

[Pideja]

Well, on your phone, it does indeed look great. But, on mine, using Chrome or Firefox, it looks like this in portrait mode:

and, in landscape:

As you can see, the breadcrumbs are truncated. Compare with the large screen:
https://pideja.ca/galleries/01_duceppe/2024-2025/01-les-gens-les-lieux-les-choses/

You may have an older version of my site. Notice the black background in the masthead is gone and my name is to the left, while centered on the mobile.

[rod_barbee]

@Pideja

You may have an older version of my site. Notice the black background in the masthead is gone and my name is to the left, while centered on the mobile.

Yep. I cleared Sarari’s cache and now I’m seeing what you see

[rod_barbee]

This is the culprit in your custom css:

[Pideja]

I remember setting this to “correct” something else…I think I was way off the mark! I now set it at AUTO. Hope it works, seems to for now.

Thanks again, you have been a big help.
Continuing with this “minor” makeover, I’ll start a new post with questions about the Masthead.
'Till then…