Jili 646 login registration,GIGABYTE X570 AORUS ELITE AX.Recharge Every day and Get Bonus up-to 50%!

LGphotography
(@lgphotography)

9 years, 3 months ago

Hello,

I have 2 issues with Twenty Twelve theme.

1./ First, I would like to be able to use the full width of the screen on gallery pages.

Customizing the CSS that way:
body .site {
padding: 0 2.85714rem;
margin-top: 3.42857rem;
margin-bottom: 3.42857rem;
box-shadow: none;
}

.site {
margin: 0 auto;
max-width: none;
overflow: hidden;
}

I got a acceptable result to show you what I am looking for: https://www.lgphotography.fr/Help/FaunaOk-twenty.jpg

But it missed up as well the titles and header and the other pages, whereas I would like to have this setup for gallery pages only.

Here is the page with no CSS: https://www.lgphotography.fr/Help/GalerieNon.jpg

I am using FooGallery and Page Builder with “Full width Stretched” attribute for the gallery row.

2./ The full width gallery is no responsive with Twenty Twelve, whereas it was with Snapshot theme.

Here are prints from my cel phone:
With Twenty Twelve: https://www.lgphotography.fr/Help/IMG_20151125_183219.jpg (the thumbnails are widther the the screen)
With Snapshot: https://www.lgphotography.fr/Help/IMG_20151125_183628.jpg
And here is the gallery on the comptuer with snapshot: https://www.lgphotography.fr/Help/FaunaOk.jpg

Actueally, I have tried several themes and Snapshot is the only one which gave this good result on cel phone… All others act like Twenty Twelve.

The link of the gallery page is here: https://www.lgphotography.fr/wordpress/portfolio/fauna/

Can anyone help me with these issues?
Do you think I have a chance to fix this, or shall I look for another theme?

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

(@lgphotography)

I have find the option in Page Builder, maybe it is a clue for the first issue: https://www.lgphotography.fr/Help/PageBuilder.jpg
Should I have it apply to something else than “body”?

Thread Starter

LGphotography

(@lgphotography)

9 years, 3 months ago

First problem solved with this CSS found on another topic:

I am still looking for a solution to the responsivness problem with the galleries on smartphone…

Here are my current settings:
https://www.lgphotography.fr/Help/FooGallery.jpg
https://www.lgphotography.fr/Help/PageAjust.jpg
https://www.lgphotography.fr/Help/PageAjust-builder.jpg
https://www.lgphotography.fr/Help/PageBuilder.jpg

.site-header,
footer[role="contentinfo"] {
	background: white;
}

footer[role="contentinfo"] {
	border: 0;
	padding-top: 48px;
}

body .site {
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.site-content article {
	margin-bottom: 24px;
}

.wrapper {
	margin-top: 12px;
}

.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 48px 0 0;
	}

	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		border: 0;
	}

	.wrapper {
		margin-top: 24px;
	}

	body .site, footer[role="contentinfo"] {
		max-width: 100%;
	}

	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		margin-left: auto;
		margin-right: auto;
		max-width: 920px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (min-width: 960px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 940px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (min-width: 980px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 960px;
	}
}

Thread Starter

LGphotography

(@lgphotography)

9 years, 3 months ago

First problem solved with the above CSS code, found in another topic.
I am still looking for the solution of the responsiveness issue on smartphone.

The code that saved me:

.site-header,
footer[role="contentinfo"] {
	background: white;
}

footer[role="contentinfo"] {
	border: 0;
	padding-top: 48px;
}

body .site {
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.site-content article {
	margin-bottom: 24px;
}

.wrapper {
	margin-top: 12px;
}

.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (min-width: 600px) {
	.site-header {
		padding: 48px 0 0;
	}

	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
		border: 0;
	}

	.wrapper {
		margin-top: 24px;
	}

	body .site, footer[role="contentinfo"] {
		max-width: 100%;
	}

	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		margin-left: auto;
		margin-right: auto;
		max-width: 920px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (min-width: 960px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 940px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media screen and (min-width: 980px) {
	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
		max-width: 960px;
	}
}

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Full width and responsiveness’ is closed to new replies.