[MattHollParticipant]

Hello.

On our homepage, I removed and image and placed a feature box there instead with an image so that I could use the animation on that image. Worked great on desktop but it was not centered on iPhone.

After digging around the forum, I tried this in CSS:

@media(max-width: 768px){
.x-feature-box-graphic-inner {
font-size: 250px !important;
}
}

This fixed it on my iPhone and iPad, but I want to make sure this code is also good for other phones using various resolutions. What do you say? Does this look correct?

The website is here:

http://www.hrvatskohomebrewprvenstvo.beer/

Thanks for any tips or insight.

[ChristopherModerator]

Hi there,

Your code is correct but icons look very large on phone. you can reduce font size for smaller devices :

@media (max-width: 768px) and (min-width:780px){
.x-feature-box-graphic-inner {
font-size: 250px !important;
}
}

hope it helps.

[MattHollParticipant]

Actually, that didn’t work. That made it off center again. I put back the code I posted above and it’s centered again.

Shouldn’t min-width be lower than max-width?

[LelyModerator]

Hello Matt,

Yes, your previous code is correct. For more smaller devices try this instead:

@media (max-width: 480px){
.x-feature-box-graphic-inner {
font-size: 200px !important; /*Adjust this accordingly*/
}
}

Hope this helps.

[MattHollParticipant]

That works. Thanks!

[LelyModerator]

You’re welcome Matt!

Cheers.

[MattHollParticipant]

Hello.

I’ve been tweaking the CSS on the site quite a lot and somewhere along the way must have input something that changed the size of the feature box image on the home page, only on mobile. Now it’s too small.

I still have this code in the CSS but changing the numbers now does nothing, so perhaps there is some code that’s overriding it somewhere.

@media (max-width: 480px){
.x-feature-box-graphic-inner {
font-size: 225px !important; /*Adjust this accordingly*/
}
}

Any chance any of you can help me track down what code is making this feature box image too small on mobile?

The page is here:

http://www.hrvatskohomebrewprvenstvo.beer/

Any help is greatly appreciated.

[MattHollParticipant]

I found the code:

@media only screen and (max-width: 480px) {
.x-feature-box-graphic-inner {
font-size: 70px !important;
}
span.x-feature-box-connector {
right: calc(100% – 70px) !important;
}
}

But, the thing is, I need that code to fix the images that I use elsewhere on the site in a feature list.

I tried changing that code to feature-list, like .x-feature-list-graphic-inner but that did not work.

Is there a way to control the feature box image and feature list image separately?

Or is there a way to control the size of ONLY the feature box image on the homepage, from the image in the previous post?

[Nabeel AModerator]

Hi again,

You can remove all previous customization and add the following code instead:

.x-feature-box .x-feature-box-graphic-inner {
    width: 100% !important;
    font-size: 100% !important;
}

Let us know how this goes!

[MattHollParticipant]

No, that didn’t work out well.

I removed these:

@media only screen and (max-width: 480px) {
.x-feature-box-graphic-inner {
font-size: 70px !important;
}
span.x-feature-box-connector {
right: calc(100% – 70px) !important;
}
}

@media (max-width: 480px){
.x-feature-box-graphic-inner {
font-size: 225px !important; /*Adjust this accordingly*/
}
}

And put your code. Then the feature list images in my Hall of Fame page and Homebrew supplies page are way too big on mobile.

I need those to stay smaller, like the 70 pixels I have in my previous code, but need the main image in the feature box at the top of the home page to be 225 pixels on mobile.

Hall of Fame is here:

http://www.hrvatskohomebrewprvenstvo.beer/hall-of-fame/

The home page has our circle logo in a feature box at the top.

Thanks for the help.

[MattHollParticipant]

Basically, to not over complicate it, is there a way to control the size of the feature box image item on the homepage and control ONLY that item. I would like to control the size of that item independently of everything else so it affects ONLY that item and not all feature box images across the entire site. Does that make sense?

This is on mobile.

Thanks!

-Matt

[ChristianModerator]

You need to append the page class to the selector. For the home page, the .home class is readily available. To use it, simply add it before the selector like

.home .x-feature-box-graphic-inner

Further customizations from here however, would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks for understanding.

[MattHollParticipant]

That worked. Thanks for your help.

[Paul RModerator]

You’re welcome! 🙂

[MattHollParticipant]

For the record, for anybody who might happen upon this thread and need a similar answer, I’ll post what finally worked.

The code above changed all of the feature box and feature list images on the home page but not on other pages. I had to add the section that the image is in in order to specifically affect that image and that image only.

So, this code worked:

@media (max-width: 480px){
.home #x-section-1 .x-feature-box-graphic-inner {
font-size: 225px !important; /*Adjust this accordingly*/
}
}

[Author]

Posts