Full width images on mobile

Support
#1

Hi, I use X Theme with Renew stack. On PC the images and video boxes are ok but on mobile they are too small. How can I make them larger and full width inside the box? Image attached.

URL - www.unidosporisrael.com.br

Thanks.

#2

Hi There @raizenman

Thanks for writing in! Could you please try adding the following CSS rules into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px) {
  .site {
    width: 100%;
  }
  .x-container.width {
    width: 100%;
  }
}

Thanks!

#3

You mean here?

Tried but didn’t see any change. Was it some place else?

#4

Hello @raizenman,

Thanks for updating the thread.

Adding CSS to Customizer might cause compatibility issues as X Theme has it’s own theme options panel. Here’s a screencast.

Thanks.

#5

Hi, I don’t have this X button on the left sidebar of my dashboard, only an X Addons button that leads to the options below. Strange!

#6

Hi There @raizenman

Upon checking your site, I see that you’re using an older version of X theme and Cornerstone plugin, so that you don’t see the X menu.

In your case, you can add global CSS under Appearance -> Customize -> Custom -> CSS area.

I would also suggest you to update your X theme, Cornerstone and other outdated plugins as well. However since you’re using older versions, you need to take a full backup of your site before updating.

Latest version information can be accessible from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195). Then you can check our update guide here (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62) and also check the migration guide to get an idea of how to take a backup (https://theme.co/apex/forum/t/cornerstone-content-builder-migration/126).

Hope that helps.

#7

It worked beautifully with the images, thanks! But text is too close to the edges. Can it be adjusted?

#8

Hi there,

Please add this code in the Global CSS:

@media (max-width: 480px) {
    .home .x-text p,
    .home .x-block-grid > li p {
        padding: 0 20px;
    }
}

After adding the code in the Global CSS, please make sure to edit the content in the Block Grid items and wrap the text in a <p></p> tag.

Hope this helps.

#9

CSS placed.

Texts already starts with <p. Should I replace it for the tag you said? Tried to place before it but didn’t change the padding.

http://unidosporisrael.com.br/quero-abencoar-israel

Thanks!

#10

Hi there,

The previous code suggestion is specific to the homepage so kindly update it to:

@media (max-width: 480px) {
    .x-text p,
    .x-block-grid > li p {
        padding: 0 20px;
    }
}

Hope this helps.

#11

Done, thanks!

#12

Hi again,

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.