Responsive: Button?

RapidWeaver Classic Stacks
1

I use ‘Open’ of Nick Cates. In a '‘Resp 3 Column’ I have 3 buttons. I use ‘Float’ as Fill Mode. The button is square with text in the middle. Pixel Width is 240 px.
If I look at my site on my iMac and I make the window large enough, the button is indeed 240 px, but if I narrow the window (same on an iPad), the button width remains the same and the buttons are overlapping each other. The button itself doesn’t narrow.
What am I doing wrong?

2

@iMac1943

Welcome to the forums…

Change the button parameter float to Flexible and you should be good, the problem is the sidebar content is overwriting your page content, making this change will fix the issue for you.

Using this method, the button will stay the same width but the breakpoints of the columns will work better :wink:

HTH
Brad

3

Indeed!!! Thank you very mutch for your help!
Fantastic forum!

1 Like
4

Must I make everything flexible here? The Resp 5 Column, the image and the Header?
When making it to the size of an iPhone it looks like the attachment with to text not exact under the photo.

5

it looks like the text is not exact under the photo.

6

@iMac1943

Select each header stack and choose alignment centre

Brad

7

Thanks Brad, this is what I did. This is the result:

Screen Shot 2016-01-17 at 22.32.33.png320×545 70.6 KB

8

see screen shot:

Screen Shot 2016-01-17 at 22.34.26.png692×270 41.7 KB

9

@iMac1943

Looks like the Theme is over-riding parameters for Headers…

Select your text in the header and cheat lol

<center>Hoofdkussens</center>

That’s the quick fix as I walk out the door, there is a css solution, just have to wait for someone else to post it or wait for me to get home.

Brad

10

Might be wrong but I don’t think there is anything fancy about the headers in Open.

If you are going to be hopping around between left/center/right text alignment of headers then maybe you could try something like this:

[1] In the global CSS panel paste this:

.header-center {
	text-align: center;
}
.header-left {
	text-align: left;
}
.header-right {
	text-align: right;
}

[2] Now, instead of dropping basic header stacks into the project, just drop in the most powerful stack of all… the HTML stack and type in:-

<h3 class="header-center">This is my header</h3>

And you should get a centered h3 header. Mix up the header levels with the classes to get the layout you want. No need for any other stacks or complexity.

Hope this helps.

2 Likes
11

Thanks for that @kryten, there is nothing I could see regarding Headers in the Theme css :blush:

Nick recommends the use of his Production Stack with that design as well… and if you have it, supports his SuperFlex. But neither (to my knowledge) directly affects alignment of headers so @kryten’s css should work with all Themes

I went looking for a sample project from the dev’s website, could only see online versions, no downloadable projects unfortunately, perhaps I just missed it… The manual is all online though and easily accessible.

Sorry it took me so long, had to stay at restaurant as was a witness to a snowy road vehicle crash into light standard until Police, Ambulance and Fire Trucks came, statements given… you know the drill… very slippery conditions here in south-south eastern Ontario tonight.

Brad

12

Thank you both!
Krypen, is this what you mean (see attachment 1)?
But how can I decrease the text (see attachment 2)?
Thank you for helping me.

1 Like
13

this is my global CSS, is it OK to you?

.header-center {
text-align: center;
}
.header-left {
text-align: left;
}
.header-right {
text-align: right;
}

div#bg {
display: none;
}
#pageHeader h1 {
font-size: 30px;
color: #9b9b8a;
font-weight: normal;
margin-top: 50px;
text-shadow: white -1px 0px 0px, white 1px 0px 0px;
}

#sidebarContainer {
width:10
0px;
}

#pageHeader h1{
font-family: Century std mt;
}

14

@iMac1943

Delete the Header Stack and replace it with an HTML stack, then paste in the code snippet…

RE: Global CSS, do you get any errors with it?

NB, you should combine the 2 pageHeader h1 classes into this

pageHeader h1 { font-size: 30px; color: #9b9b8a; font-weight: normal; margin-top: 50px; text-shadow: white -1px 0px 0px, white 1px 0px 0px; font-family: Century std mt; }

And not too sure what you’re trying to do with sidebarContainer, but I assume…

sidebarContainer { width:100px; }

Brad

15

Hi Brad,

I understand your point “NB, you should combine the 2 pageHeader h1…”
I changed it already.
About the Header Stack, do you mean this:
h3 class=“header-center”>Hoofdkussen</h3

but how can I decrease the text? It too big now comparing to the others.

16

@iMac1943

Hi there

You still have the header stack under the image stack. and basically applying H3 2 times to the text.

  1. Delete the header stack (the one in blue you have highlighted in your screenshot)

  2. Add an HTML stack where the Header stack was

  3. Paste in the H3 code

  4. Save

  5. Preview.

Does that help?

Brad

17

Thank you Brad, these are the steps I took:

It’s OK for 'matrassen. The other 4 I didn’t change for the moment are very small now. I guess it will be OK when they all are changed.

1 Like
18

I changed the others too, but I become a strange result. The others are still small, I don’t know, it’s not OK.

19

@iMac1943

Don’t know what’s wrong, here is a demo of what @kryten and I suggested and it works fine…

Open Test Page

Brad

20

OK, thank you. I had to change it back to my first project. But I’ll first look at your example and try again.
This is the site as it is now: http://www.matratex.com/fr/
If you see ‘things’ that are wrong, please let me know.