After a certain screen size website is not responsive

[joomnovice123]

Hello, I'm having similar Issues with a website, after a certain screen size my website isn't responsive, it starts to narrow inwards, I've tried adding additional sizes to the template css without success, as a complete beginner on joomla I'm out of my depth with this. any advice/help would be appreciated..

this is the website I'm trying to develop...

https://coriumclothing.co.uk/

[Pavel-ww]

Hi. Try this

Code: Select all

@media (min-width: 576px) {
    .container {
        width: 540px;
    }
}

[joomnovice123]

Hello Pavel-ww

Thank you for responding, I've copied and pasted code into my template css here...

@media (max-width: 767px) {
.logo-control .logo-img-sm {
display: block;
}
.logo-control .logo-img {
display: none;
}
}
@media (min-width: 768px) {
.logo-control .logo-img-sm {
display: none;
}
.logo-control .logo-img {
display: block;
}
}
@media (min-width: 576px) {
.container {
width: 540px;
}
}
#community-wrap .collapse {

saved... tested website here...

http://www.whatismyscreenresolution.net ... 1366&h=768

the results are still the same.. From 19'' desktop onwards website starts to move inwards, 20'',22'', 24''
the same on Tv screen 1080p website moves inwards instead of fitting screen, I've also tried other test sites the results are the same...

Like I've said I'm a complete beginner and out of my depth with css and the placement of codes etc. I don't mind researching and trying various fixes as a template can always be deleted and uploaded again if an error occurs whilst trying them, having said that whatever I've tried the results are the same... no change... someone said to mention that I'm using T3 plugin if that helps!!!

Once again thank yo for your kind help & support.

[Pavel-ww]

Hi. I do not quite understand what you need. Perhaps you do not use the terms correctly. .

Responsive is a few breakpoints. When the breakpoint is reached, the page width decreases with a jump. This is the best practice, as it allows you to configure content in a static condition for different devices. The code that I gave you - works. This adds another breakpoint for mobile devices.

Fluid is a rubber site. Content is constantly shrinking when the width decreases. It is a bad practice, as there is no control over the content and it can be rebuilt randomly, which may look like a curve layout.

Usually used both practices. For example, in the Bootstrap standard, there are several breakpoints with Responsive behavior. And only the smallest screens (from 576px and less) use Fluid behavior.

If you need Fluid behavior for all devices, use this code.

Code: Select all

.container {
	width: 100% !important;
}

[joomnovice123]

Thank you Pavel-ww for your kind help and support once again,

I've tried both of these codes in my template css without any change to the webpage, it's still moving across the screen inwards above certain screen sizes,

It starts to move inwards at screen size 15'' (1366 x 768) the same on 1080p TV (1920 x 1080)

below these sizes it seem okay and doesn't move inwards 13'' (1280 x 800) 720p TV (1280 x 720)

website moves.jpg

These changes on screen sizes can be checked by you here if you have any time for this

https://screenfly.org/#u=https%3A//cori ... h=1080&a=4

I'm looking for the site to stay the same without the movement inwards, with spaces on the sides as in image, can this be done?

kind regardsa

[Pavel-ww]

Hi. I do not see that you would apply this code

Code: Select all

.container {
	width: 100% !important;
}

Here is the result of use (and you do not need any services, all this can be checked using your browser developer tools)

1.jpg

[Per Yngve Berg]

It's caused by "margin: auto" with certain screen resolutions.

[Pavel-ww]

It's caused by "margin: auto" with certain screen resolutions.

Hi Per. I'm afraid you can mislead inexperienced user with your answer. How does margin:auto have an impact if the width of the container will be 100%?

[joomnovice123]

Hello Pavel-ww

I'm back on my website development now.. I'm still getting the same results after placing the code in my template css...

@media (min-width: 576px) {
.container {
width: 540px;
}
}
.container {
width: 100% !important;
}

The Screen sizes are 2560 x 1440

the files are screenshot image from 2 different gaming computer screens, they are still not full screen width

any other solutions advice or help would be really appreciated...

Kindest Regards

Joomnovice123

[joomnovice123]

Hello Joomla Forum

Can anyone help me further with the above, I've been checking for posts or solutions for a while, and have had no responses for a while. I appreciate the suggestion's, codes, and help I've received so far although the code I was kindly given isn't responding in the desired way ''don't know if I placed it correctly in my template css'', It was also mentioned that ''It's caused by "margin: auto" with certain screen resolutions.'' being a complete Joomla novice I'm not sure what that is or how to resolve ''Margin Auto'' issues either, so if anyone could kindly help me with this I'd be very thankful for any input..

kindest Regards

joomnovice123

[Pavel-ww]

Hello Joomla Forum

Can anyone help me further with the above, I've been checking for posts or solutions for a while, and have had no responses for a while. I appreciate the suggestion's, codes, and help I've received so far although the code I was kindly given isn't responding in the desired way ''don't know if I placed it correctly in my template css'', It was also mentioned that ''It's caused by "margin: auto" with certain screen resolutions.'' being a complete Joomla novice I'm not sure what that is or how to resolve ''Margin Auto'' issues either, so if anyone could kindly help me with this I'd be very thankful for any input..

kindest Regards

joomnovice123

Hi. I still do not see the code from this topic to be applied wherever on your site. I think you need to read the documentation of your template to determine the right place to accommodate your css code.

[joomnovice123]

Hello Pavel-ww

The codes that you kindly gave me are at line position 1-8 in my template css... if this isn't the right place where do they need to go?


Kindest regards

Joomnovice123

[Pavel-ww]

The codes that you kindly gave me are at line position 1-8 in my template css... if this isn't the right place where do they need to go?

Hi. I do not know. In each template it can be differently. As I wrote above, learn the documentation of your template.

Or contact its developer.

General rules for all templates: Never make changes to template.css. This is 100% not the right place for your code. And your own code should always be added to the bottom of the css file.

[joomnovice123]

Hello Pavel-ww

Thank you for your kind help and support once again, I've looked at the template documentation without any success so far, I will now try to contact the developer to see if they can help me further...

Kindest regards

joomnovice123

[Pavel-ww]

Hello Pavel-ww

Thank you for your kind help and support once again, I've looked at the template documentation without any success so far, I will now try to contact the developer to see if they can help me further...

Kindest regards

joomnovice123

Hi. Your template based on T3 Framework. You should learn its documentation https://www.t3-framework.org/documentat ... custom-css

You may not need CSS to achieve what you want. Learn the settings of the layout. Usually, similar templates allow you to set the full width using its settings.
https://www.t3-framework.org/documentat ... out-layout

In addition, T3 Framework is obsolete. If you like templates from Joomlart, look at T4 Framework based templates https://www.joomlart.com/t4-framework