Marketer questions

Hi there,

If you can describe when you want the sidebars displayed to the side or when they stack below the content I can provide the necessary CSS.

The Social Icons are these for sharing or just links to your social accounts ?

I am trying to understand under what conditions the right sidebar may or may not appear.

Because for example the Marketer theme's main column shows very small in a smartphone even in landscape. The same applies for portrait in a tablet. Only with tablet landscape and in my computer screen the main column is big enough to look good and have the side bar at the same time.

So this can be changed only with CSS code? Because to be honest I have to make tests to see what shows better and what not. Right now I would like the landscape of a smart phone and the portrait in a tablet to show only the main column exactly as it does right now when viewed from my smartphone in portrait mode.

As for the social icons I want them to link to my accounts, not sharing.

Hi Stratos,

Yes, you would need custom CSS, adding @media queries to specify how a specific view should look on a specific dimension.

As is, the width of a device specifies if a screen will have it’s sidebar display beside the site-content.

The default breakpoint for the occurrence of this is at 768px wide devices.

We can try to increase this through CSS. Try adding this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 1024px) {
    /* CSS in here for tablet only */
    .site-content {
        flex-direction:column;
    }

    .container .site-content > * {
        width: auto;
    }
}

Kindly modify 1024px to your preferred value, however, this is the common breakpoint for tablets.

Source: https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

With regards to the Social media Icons you may try adding them through adding a GB Buttons Block in Appearance > Widgets > Right Sidebar as such: https://share.getcloudapp.com/X6uE79W1

You may also follow something like: https://www.youtube.com/watch?v=1E7zFl678kg

Hope this clarifies!

Hello,

With the CSS code you provided I can manage when the right sidebar should appear/disappear but the main column remain as it was (left aligned and same width as before). I want when the right sidebar disappears then the main column to be aligned center and stretch more in order to cover more area than before.

Also I am curious...if the right sidebar depends on the width then why in my Samsung Galaxy S21 5G that has a display of 1080 x 2400 pixels will make the sidebar disappear in portrait? Or there is different width limits for each device (smartphones, tablets, computers)?

Also regarding the social buttons I see in the youtube video a snippets options to the wordpress menu that I am missing. Where do I find this?

With the code I provided, the Marketer theme behaves as such: https://share.getcloudapp.com/7KuQWo5B

Moreover, if the screen size is 1080, this is what the site looks like: https://share.getcloudapp.com/9Zumyd1g. “The website doesn't actually know the physical resolution of your device, of course. It asks the operating system, through JavaScript, to retrieve the resolution.”

Reference: https://stackoverflow.com/questions/15451800/difference-between-screen-resolution-and-browser-resolution#:~:text=The%20website%20doesn%27t%20actually%20know%20the%20physical%20resolution%20of%20your%20device%2C%20of%20course.%20It%20asks%20the%20operating%20system%2C%20through%20JavaScript%2C%20to%20retrieve%20the%20resolution.

You can try going to this website on your phone to see the resolution you’re using: https://bestfirms.com/what-is-my-screen-resolution/

Perhaps you could provide the link to your site so we could see how it looks from our end? You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

The Snippets functionality is from third party plugin Code Snippets.

Hope to hear from you soon. :)

I used the resolution tool that you provided but for some reason the numbers it shows does not correspond to the theoretical numbers of my devices. Below I give you all the resolutions. Why is that???

Device Theoretical resolution With online tool
------------------------------------------------------------
desktop 1920 x 1080 1536 x 864
tablet 1920 x 1200 1280 x 800 Galaxy Tab A (2016)
smartphone 2400 x 1080 800 x 360 Galaxy S21 5G

Also with my tablet the main column does not stretch as you show in your video. The right sidebar disappears but the width of the column remains the same. It's the same behavior as it shows in the customize section when I press the tablet preview (it shows the main column only but not occupying the entire width of the screen).

Only in my smartphone when in portrait the main column occupies the entire width of the screen.

I provide my website link. Please give it a look and let me know what you think.

Hi there,

change Fernandos CSS to this:

@media (max-width: 1024px) {
    /* CSS in here for tablet only */
    .site-content {
        flex-direction:column;
    }

    .container .site-content > * {
        width: auto;
        max-width: 100%;
    }
}

You need the max-width: 100%; property to overcome this CSS that you have in your Customizer > Additional CSS:

@media only screen and (min-width: 769px) {
    .right-sidebar .content-area {
        max-width: calc(100% - 320px);
    }

    .right-sidebar .sidebar {
        min-width: 300px;
    }

    body.mediavine-video__has-sticky .generate-back-to-top {
        bottom: 300px !important;
    }

    body.adhesion:not(.mediavine-video__has-sticky) .generate-back-to-top {
        bottom: 120px !important;
    }
}

That change will make the main container fill the width of the screen.

Can you raise a separate topic regarding the Social Icons ?

The new CSS seems to do the trick. One minor observation only. The main column seems to be slightly aligned to the left instead of center. Is there some option in the customize settings or this is something that needs additional CSS to be fixed?

Try add this CSS too:

.right-sidebar .site-content .content-area .site-main {
    margin-left: 20px;
}

Thanks. This really did it.

One more thing I observed now. When in portrait mode with my tablet the right sidebar appears below the main column which is as it should. But it appears to be also aligned left. Can we somehow make this also to align center?

I want this to happen only when the right sidebar appears under the main column. When it appears on the right side I want to stay unaffected as it is right now.

Hi Stratos,

Kindly try modifying this:

@media (max-width: 1024px) {
    /* CSS in here for tablet only */
    .site-content {
        flex-direction:column;
    }

    .container .site-content > * {
        width: auto;
        max-width: 100%;
    }
}

into this:

@media (max-width: 1024px) {
    .site-content {
        flex-direction:column;
    }

    .container .site-content > * {
        width: auto;
        max-width: 100%;
        float:unset;
    }
    aside.widget > * {
        text-align: center;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        margin:20px;
    }
}

This new code would align the text center as well. If you don’t want this behavior, kindly remove this part in the code above:

aside.widget > * {
        text-align: center;
    }

Let us know how it goes. :)

Excellent. it worked. Thank you!

One think I saw right now is that the following CSS you gave me not only changes the left side of the main column in tablet only but in desktop also. Is there a way this change to affect only when viewed in tablet? Because when I look at it from my desktop I like how the left side of the main column is aligned with everything above it. When I use this CSS it does fix the tablet but brakes the left alignment on my desktop.

.right-sidebar .site-content .content-area .site-main {
margin-left: 20px;
}

To clarify, are you wanting to remove the margin on Desktop? If so, kindly modify this:

.right-sidebar .site-content .content-area .site-main {
    margin-left: 20px;
}

to this:

@media (min-width: 1025px) {
    .right-sidebar .site-content .content-area .site-main {
        margin-left: 0px;
    }
}

Kindly let us know. :)