Creating a smaller collapse button

bigshipsalvage
(@bigshipsalvage)

3 years, 4 months ago

Hi there! I’ve looked for about an hour and a half now for someone describing the same issue/topic as I. I’ve found similar things but I haven’t been able to apply the principles outlined by you towards my own concept.

Essentially, I would like the make the width of the expand/collapse button smaller. It looks fine on desktop but when we open the website on mobile, the button is wider than the rest of the page, causing some white space to appear.

I know that it should be simple but I can’t wrap my head around the css fully.

Currently we have:

[expand title=”Click for Additional Details” swaptitle=”Collapse” trigclass=”noarrow my_button” tag=”div”]

Can you help me write some CSS as well as rewriting that shortcode?

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

Plugin Author twinpictures
(@twinpictures)

3 years, 4 months ago
Hello. Happy to help.
OK, so what you have is a div element with a class of ‘my_button’.
One would assume this class has some CSS defined:
```
.my_button {
   ...
}
```
And this is fine and dandy for larger screens, but when the viewport gets smaller, the button is not responsive.
You have two ways to go here. The first is to define the button in a more responsive way. How is the current .my_button class defined?
The second method is to define a CSS for specific viewport sizes. For example when the screen size is below 750px wide:
```
@media screen and (max-width: 750px)  {
   .my_button {
      ...
   }
}
```
The internet has many resources on how @media screen max-width works.

Does this help get you pointed in the right direction?
Thread Starter bigshipsalvage
(@bigshipsalvage)

3 years, 4 months ago
It sort of does, but why can I not just set the width to something like this so that it’s responsive?
```
.my_button {
  width: 50%;
}
```
Thread Starter bigshipsalvage
(@bigshipsalvage)

3 years, 4 months ago
```
@media only screen and (max-width: 768px) {
  .my_button {
    width: 80%;
  }
}
```
doesn’t work either
Plugin Author twinpictures
(@twinpictures)

3 years, 4 months ago
no link to the page. no example of how my_button is currently defined.
not sure we can help you much. Try:
```
@media only screen and (max-width: 768px) {
  .my_button {
    width: 80% !important;
    border: 1px dotted red;
  }
}
```
The border makes sure the CSS is working and you are not dealign with a caching issue or something.

Good luck.
Thread Starter bigshipsalvage
(@bigshipsalvage)

3 years, 4 months ago

I’ll try to implement it this morning and let you know how it goes. Is there anywhere that we can send you a link privately? It feels insane that we are permanently linking to our website on a support forum.

Thread Starter bigshipsalvage
(@bigshipsalvage)

3 years, 4 months ago

That worked. Thank you for the support, despite my reluctance to overshare.

Appreciate the plugin – will give a good feedback when I have a moment!

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

The topic ‘Creating a smaller collapse button’ is closed to new replies.

Tags