[Support request] Website is not responsive in Tablets

[subham sarkar]

Hi, I found all my websites currently have generatepress installed aren’t responsive in tables, could you please let me know how to fix this issue.

[Ying]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[subham sarkar]

Yes please have a look.

[Ying]

This is what I see in chrome developer tool simulating iPad pro:
https://www.screencast.com/t/SJQp0eUttA

and Ipad:
https://www.screencast.com/t/uLZ5EXPqqA4k

Are you referring to the “You may also like” section in the right sidebar?

[subham sarkar]

Yes, I think side bar where the related posts are showing should not be in that place and should looks like mobile view.

[subham sarkar]

And you can see their was no gap in the right side of the screen.

[Ying]

Your website looks good on iPad, I think the issue appears on devices like iPad pro?

The default mobile breaking point is 768px which means the mobile layout only appears on devices narrower or equal to 768px. So for example, the width of the Ipad pro is 1024px which would be treated as a desktop， that’s why the sidebar will still occupy the same position.

There’s no left padding set for the container on desktop:
https://www.screencast.com/t/uvogQuIydq

Go to Customizing > Layout > Container, add some left padding for Content Padding should fix the issue.

[subham sarkar]

Thanks for your answer here are few things I want to ask

1: Can I convert my default bluet list in a style

By default I have something like https://prnt.sc/11eqhaw

But wondering if I can convert them like https://prnt.sc/11eqjnw

2: Change link style to other objects

Currently I’m using bellow css for link styling but wondering if I can exclude author box from this

.entry-content a {
text-decoration: none;
border-bottom: 2.5px solid #FFA384;
padding-bottom: 2px;
}

.footer-widgets a:hover {
text-decoration: none;
border-bottom: 2px solid #FFA384;

}

https://prnt.sc/11eqp6i

[subham sarkar]

And one last think could you give me a css code which will also change the color of link underline text on hover like https://www.thespruce.com/shrubs-for-sun-the-best-bloomers-2132441

[subham sarkar]

I check few websites in tab view and in mobile device (after rotate screen horizontally) they look totally fine, so I think this is a glitch in your framework which causes the issue. I’m using this theme from last few years but never experienced this issue before, so I think your development them should consider this issue seriously.

Here are few websites which looks totally fine.
https://morningchores.com/uses-for-cattails/

https://savvygardening.com/how-to-harvest-chives/

[Elvin]

Hi there,

For the bullet colors, try this CSS:

ul {
    list-style: none;
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-size: 20px;
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

replace color: red; with your preferred color:

Currently I’m using bellow css for link styling but wondering if I can exclude author box from this

we can exclude things by using :not pseudo class.

Example:

.entry-content a:not(.author) {
text-decoration: none;
border-bottom: 2.5px solid red;
padding-bottom: 2px;
}

And one last think could you give me a css code which will also change the color of link underline text on hover like https://www.thespruce.com/shrubs-for-sun-the-best-bloomers-2132441

You can do it like this.

.entry-content a:not(.author):hover {
border-bottom: 2.5px solid red;
}

[subham sarkar]

For list it’s showing like

https://prnt.sc/11g7l3b

And other codes also didn’t work

[subham sarkar]

What I want is https://prnt.sc/11g7pjp

[Elvin]

For list it’s showing like

https://prnt.sc/11g7l3b

And other codes also didn’t work

Ah right, let’s exclude the menu. try this:

ul:not(.menu) {
    list-style: none;
}

ul:not(.menu) li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-size: 20px;
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

If it doesn’t work smoothly as preferred, can you point us to a page with a list so I can inspect the selectors used? Let us know.

[subham sarkar]

It’s still showing in sub menu https://prnt.sc/11haizo

[Author]

Posts