4 replies [Last post]
Leea
Leea's picture
Offline
newbie
Last seen: 16 weeks 6 days ago
Timezone: GMT-5
Joined: 2018-03-31
Posts: 4
Points: 6

I am not very good at CSS yet. I am trying to change a web page to suit our needs. The guy who created it started with someone else's template which is at;
https://html5up.net/twenty

There are parts of the page I am not fond of. He has buttons to go to outside pages, we need about six. They have large graphics and only two across. I want smaller graphics and four across. I put a sample of the HTML below.

After that I added the CSS that I think is relevant. The whole thing is too much to post. My problem is he has Wrapper, Container etc. all over the place and I am not sure which count. I put the sections in the order they appear in his main.css file. There are duplicates. I find this confusing.

I probably didn't copy everything needed. I am not sure what is needed. How can I change it from two to four icons per row? I have played with it and I just mess it up.

thanks
Lee

<section class="wrapper style3 container special">
	<header class="major">
		<h2>Ways to <strong>Connect</strong></h2>
	</header>
	<div class="row">
		<div class="col-6 col-12-narrower">
			<section>
				<header>
					<h3><em>Read our newlsetter</em></h3>
				</header>
				<a href="https://www..../read" target="_blank" class="image featured"><img src="images/newsletter.png" alt="" /></a>
			</section>
		</div>
		<div class="col-6 col-12-narrower">
			<section>
				<header>
					<h3>Our Group on Facebook</h3>
				</header>	
				<a href="https://www.facebook..." target="_blank" class="image featured"><img src="images/facebook.png" alt="Facebook" /></a>		
			</section>
		</div>

.wrapper {margin-bottom: 5em; padding: 5em;
}
.wrapper.style3 {background: #fff; color: inherit;}
.wrapper {margin-bottom: 4em;
 padding: 4em 3em;}
.wrapper {margin-bottom: 3em;
 padding: 3em 2.5em;}
 
.wrapper.special br {display: none;}
.wrapper {margin-bottom: 2.5em; padding: 2.25em 1.5em;}
 
.wrapper.special br {display: none;}
 
.container {
margin: 0 auto; max-width: 100%; width: 1400px;}
@media screen and (max-width: 1680px) {
 
 
.container {width: 1200px;}
}
Then there are a bunch more: @media screen... for different sizes.
 
section.special, article.special {
		text-align: center;
	}
 
 
header.major {
padding-bottom: 2em;}
 
header.special {margin-bottom: 5em; padding-top: 7em; position: relative; text-align: center;}
 
header.special:before, header.special:after {
border-bottom: solid 1.5px; border-top: solid 1.5px; content: ''; height: 7px; opacity: 0.1;
 position: absolute; top: 1.75em; width: 43%;}
 
header.special:before {left: 0;}
 
header.special:after {right: 0;}
header.special {margin-bottom: 3em; padding-left: 1.5em; padding-right: 1.5em;}
Then are a bunch more header.special with duplicates again.
 
header.major {
padding-bottom: 2em;}
header.major {
padding-bottom: 1.5em;}
Then there are more for different screes sizes.
 
.row {display: flex; flex-wrap: wrap; box-sizing: border-box;
 align-items: stretch;}
.row > .col-12-narrower {width: 100%;}
.row > .col-6 {
			width: 50%;
		}
 
 
.row > .col-12 {
			width: 100%;
		}
.row {
margin-top: -50px; margin-left: -50px;}
Then there are more repeats for screen sizes.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9716
Points: 3792

Hi Lee

Can you post a link to your actual page, so we have something real to work with, including your images. I took a quick look at the theme page you linked, and it's the usual PoS WP themed crap markup and style sheets.

If we can see your implementation, it will be easier to sort out.

By the way, that huge banner at the top is very user UNfriendly. They come to you to shop, get information or learn and that banner delays their gratification. The lack of decent contrast, text to background, is an accessibility issue. There may be other issues graphically, but that's not my bailiwick.

They have 1,443kB (1.4 megaBytes) in html, css, and scripts to deliver 2,524Bytes (384 words) of text. CSS docs are maybe 3X what they should be and more than a megaByte of scripts is ridiculous.

I don't doubt you're having trouble. And this theme is actually one of the better ones.

Link to what you've done so we have a start.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Leea
Leea's picture
Offline
newbie
Last seen: 16 weeks 6 days ago
Timezone: GMT-5
Joined: 2018-03-31
Posts: 4
Points: 6

Thanks but I don't have a

Thanks but I don't have a page to link to. I am just playing with this on my computer. I appreciate your opinion of his template. It confirms my opinion that it isn't a good starting point. So I think I will start over.
Lee

HankWheely
HankWheely's picture
Offline
newbie
NY
Last seen: 8 weeks 3 days ago
NY
Timezone: GMT+3
Joined: 2018-10-18
Posts: 1
Points: 1

I am also new to all this. On

I am also new to all this. On a related note, can you help me out with something? So about a few days ago I did a website redesign, check it out: http://under-the-open-sky.com. I need your opinion to make necessary improvements to layout and design. Any thoughts?

MohammedBA
MohammedBA's picture
Offline
newbie
Last seen: 4 weeks 4 days ago
Timezone: GMT+3
Joined: 2018-11-15
Posts: 1
Points: 1

This website has been very

This website has been very informative
https://cssminifier.org/